Twitter BootStrap Confirmation not working for dynamically generated elements

问题

I am using DataTable's with dynamic content generated on page load. In table I have used bootstrap confirmation. To load it below script.

$( document ).ajaxStop(function() {
    $(document).find('[data-toggle="confirmation"]').confirmation();
});

It opens confirmation box, but when clicking on "Yes" or "No" , it's not working.

This is not working

I have below code to detect 'Confirmed' event.

$(document).ready(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

This is working

$(document).ajaxStop(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

What's wrong with `document.ready` ?

Edit :

I have same code with document.ready working on other page, but there is no DataTable, it's HTML DIV structure.

回答1:

Try changing your event binding slightly so it's bound for every existing and future .delete-record element using the alternate $.on syntax.

$(document).ready(function(){
    $('body').on('confirmed.bs.confirmation', '.delete-record', function() {
        deleteForm($(this).attr('data-delid'));
    });
});

Not knowing your page structure I opted to bind to body, but you can bind it to any parent element of your table.

回答2:

I think it because the elements dynamically generated by dom manipulation after document ready

How about use .delegate instead of .ready ?

$(document).delegate('.delete-record', 'confirmed.bs.confirmation', function() {
    deleteForm($(this).attr('data-delid'));
});

回答3:

The same problem...
Spend a little time to understand plugin!
It's very simple:

my_new_dynamic_element.on('confirmed.bs.confirmation', function(){alert('ok')}).confirmation();

来源：https://stackoverflow.com/questions/30136652/twitter-bootstrap-confirmation-not-working-for-dynamically-generated-elements

标签

jquery

ajax

twitter-bootstrap

document-ready

confirmation