BootStrap boot confirmation does not work for dynamically generated items

Question

I am using a DataTable with dynamic content created when the page loads. In the table, I used download confirmation. To download it below the script.

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

Opens a confirmation window, but when you click Yes or No, it does not work.

This does not work

I have the code below to detect the Confirmed event.

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

Works

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

What happened to document.ready ?

Edit:

I have the same code with document.ready that works on another page but there is no DataTable, this is the HTML DIV structure.

Answer 1

Try changing the event binding a bit so that it is bound for each existing and future .delete-record element using the alternative $.on syntax.

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

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

Answer 2

I think this is because the elements dynamically generated by the dom manipulation after preparing the document

How to use .delegate instead of .ready ?

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

Answer 3

The same problem...
Take a little time to understand the plugin!
It is very simple:

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