Event does not work after running replaceWith

Asked

Viewed 59 times

1

I use this plugin: http://bootstrap-confirmation.js.org/

Segue Jsfiddle: https://jsfiddle.net/oq0zcn94/79/

After clicking the "replaceWith" button, the "Confirmation" button no longer works.

Follows code:

$('#teste').confirmation();

$("#replaceWith").click(function() {
  $('#teste').replaceWith('<button id="teste">Confirmação</button>');
});

The "Confirmation" button does not work after clicking the "replaceWith" button".

Update @Ricardopunctual:

Follows code:

$('[data-toggle=confirmation-document]').confirmation({
    singleton: true,
    popout: true,
    rootSelector: '[data-toggle=confirmation-document]',
    title: '',
    content: '',
    buttons: [
        {
            label: 'Criar',
            onClick: function () {
                //códigos
            }
        },
        {
            label: 'Apagar',
            onClick: function () {
                //códigos
            }
        }
    ]
});

Some solution ?

jquery

  • It is because the DOM has already been loaded. It puts the script inside the replaceWith that should work

  • 1

    As the friend said, the gift has already been loaded, Istener listened to the old button and when changing it, the same is lost. Use another element instead of the button directly: $("body"). on("click", "#replaceWith", Function(){...})

  • 1

    I updated the fiddle here to set confirmation with the properties, so it gets good?

  • @Ricardopunctual, yes. Thank you for helping me.

2 answers

4


Yes, you replaced the content and missed the event, just add the event again:

var ops = { ... };
$( "#replaceWith" ).click(function() {
   $('#teste').replaceWith('<button id="teste">Confirmação</button>');
   $('#teste').confirmation(ops);
});

Here the fiddle updated: https://jsfiddle.net/oq0zcn94/94/

  • Ricardo, there is no other way using .on() jquery ?

  • 'Cause I start like this: $('#teste').confirmation({ opões e lógica aqui });

  • I didn’t want to copy all the options and logic again.

  • 1

    For that you would have to see the method code confirmation(). The .on() serves for supported events such as click and Blur. It would function as the "#replaceWith" element click event. But you can put the options in a variable and reuse, it doesn’t help decrease the duplicity?

  • Ricardo I updated post, please look code.

2

The code is a little confused in your Fiddle, but what I could notice is that replace "kills" the whole configuration made for the button id="teste"

I made a small change:

$( "#replaceWith" ).click(function() {
$('#teste').replaceWith('<button id="teste">Confirmação</button>');
$('#teste').confirmation();
});
$('#teste').confirmation();

and it works, see: https://jsfiddle.net/jxcbp2wz/

I will not debug Jquery to know what is done in terms of event association after replaceWith, but I think it’s related to that: Events not registering after replaceWith

  • I changed the fiddle link. I copied the original fiddle link by mistake.

  • There’s no other way, like .on() ? Because $('#teste').confirmation({ varias opções }); within a function confirmation, has several options and great logic.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.