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.

Vaccaro

Is the .delete-record element dynamically added or always on the page? – Shirleneshirley

first time it's coming from PHP script, and on page load DataTable loads data automatically, so it's coming in response on page. mean always on page. before and after. – Vaccaro

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.

Shirleneshirley

OMG ! How I forgot to use event-delegation? every time I use this, I just haven't noticed it. Thank you very much. It worked, I have bind it to document – Vaccaro

I seem to be having the same problem despite adopting the event binding suggested above. jQuery 1.11.2 and Bootstrap Confirmation 2.1.3 My jsfiddle jsfiddle.net/p98ajtbm/2 – Halhalafian

My issue was actually the popover not being displayed at all. Got it working by reinitiating the plugin after the new DOM is generated jsfiddle.net/apphancer/2vvgq6yw – Halhalafian

my prob was slight diff, but deleteForm($(this).attr('data-delid')); this line turn on my bulb!!! :D :D Thank you so much. – Arneson

Answer 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'));
});

Sinapism

both are same, just version issue. in 1.4.3 delegate was there, but in versions above 1.7 .delegate() has been superseded by the .on() method. which is same as above correct answer. Though, thanks for pointing. – Vaccaro

Answer 3

a more simple solution: you have an initialization like

$('[data-toggle="confirmation"][data-target="service"]').confirmation({});

put this inside a function before $(document).ready(function(){}); and call it after the dynamic content is loaded

function confirm(){
    $('[data-toggle="confirmation"][data-target="service"]').confirmation({
        your options come here
    });
}
$(document).ready(function(){
    confirm();
});

Scala

Answer 4

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();

Drandell