Question

我有一个使用AJAX加载页面上的动态内容的表单。我也在使用bootstrap-confirmation来确认取消请求的函数。最初加载页面时确认有效。

以下是示例代码：

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

.cancel-request的点击事件适用于动态内容，但确认不会。我已经尝试将点击处理程序上的选择器更改为document，但它没有任何区别。我无法找到将确认绑定回动态元素的方法。

我已尝试在cancelRequest()上创建回调，然后在其中重新初始化bootstrap-confirmation，但它没有任何区别。我也尝试在complete:选项中重新加入它，但这也没有用。

我在其他一些SO答案中尝试了Twitter BootStrap Confirmation not working for dynamically generated elements，但在我的情况下它们并不起作用。

Answer 1

你的JSfiddle正在删除你绑定JQuery监听器的元素。另一种方法是简单地操纵你要替换的元素，这样你就不必与瞬态元素作战。

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

Bootstrap确认没有绑定到动态元素？

1 个答案: