Twitter BootStrap Confirmation not working for dynamically generated elements

Question

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.

Answer 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.