0

I have a form which uses AJAX to load dynamic content on the page. I am also using bootstrap-confirmation which I use to confirm a function which cancels a request. The confirmation works when the page is initially loaded.

Here is example code:

$(function() {

    $('[data-toggle=confirmation]').confirmation({
      rootSelector: '[data-toggle=confirmation]',
      popout: true
    });

    $(document).on('submit', '#some-form', function(e) {
      e.preventDefault();

      submitForm();
    });


    $('.static-element').on('click', '.cancel-request', function() {
      cancelRequest();
    });
}

The click event for .cancel-request works on the dynamic content, however the confirmation does not. I've tried changing the selector on the click handler to document but it makes no difference. I just can't find a way to bind the confirmation back to the dynamic element.

I've tried creating a callback on cancelRequest(), then reinitializing bootstrap-confirmation inside that but it made no difference. I also tried reinializing it inside complete: option but that didn't work either.

I tried Twitter BootStrap Confirmation not working for dynamically generated elements among a few other SO answers, but they doesn't work in my situation.

EternalHour
  • 8,308
  • 6
  • 38
  • 57
  • Please create a `jsfiddle` with exact problem. – Shiladitya Sep 14 '17 at 04:07
  • I tried but I'm unable to get bootstrap confirmation working in jsfiddle. Although the confirmation doesn't work, it still exhibits the same behavior. If you inspect the button before clicking it's bound to it, after clicking it is not. https://jsfiddle.net/6wrb01u6/6/ – EternalHour Sep 14 '17 at 06:37
  • Here you go with a solution https://jsfiddle.net/6wrb01u6/7/ . `content` is a `class` not an `id`. Change click event of cancel to `$('.content').remove();` – Shiladitya Sep 14 '17 at 06:45
  • Thanks, but the same issue remains. `bootstrap-confirmation` is bound to the button before clicking it but is not afterward. – EternalHour Sep 17 '17 at 23:38

1 Answers1

1

Your JSfiddle was removing the element you were binding the JQuery listener to. An alternative approach would be to simply manipulate the element you were replacing so you don't have to battle with the transient elements.

//from your JS fiddle at https://jsfiddle.net/6wrb01u6/6/
$('[data-toggle=confirmation]').confirmation({
  rootSelector: '[data-toggle=confirmation]',
  // other options
});

$('#replace').on('click', '.do-something', function() {
  var html = "content";
  $.ajax({
    url: "/echo/html/",
    type: "POST",
    data: html,
    dataType: "HTML",
    success: function(data) {
      $('#replace>span').removeClass('do-something').removeClass('btn-primary');
      $('#replace>span').addClass('cancel').addClass('btn-danger');
      $('#replace>span').html('Cancel');
      $('.content').remove();
      $('#replace').append('<p class="content">New content</p>');
    }
  });
});

$('#replace').on('click', '.cancel', function() {
  $('.content').remove();
});
Michael Stewart
  • 11
  • 3