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.
4
Answers
Try changing your event binding slightly so it’s bound for every existing and future .delete-record element using the alternate
$.on
syntax.Not knowing your page structure I opted to bind to
body
, but you can bind it to any parent element of your table.I think it because the elements dynamically generated by dom manipulation after document ready
How about use
.delegate
instead of.ready
?The same problem…
Spend a little time to understand plugin!
It’s very simple:
a more simple solution:
you have an initialization like
put this inside a function before $(document).ready(function(){});
and call it after the dynamic content is loaded