Twitter Bootstrap Question posted in

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 ?

enter image description here

Edit :

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

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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'));
});
    Login or Signup to reply.
  3. 0

    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();
    Login or Signup to reply.
  4. 0

    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();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search