Question

我点击它时会触发popup confirmation plugin（以确保用户想要执行特定操作）。该插件使用以下代码完美地在页面上的链接上运行：

$('.confirmation-callback').confirmation({
         onConfirm: function(event, element) { 
               alert('hello');
          }
      });

但现在问题是当我创造＆＃34; new＆＃34;通过页面上的ajax元素，它们不受上面代码的约束，当你点击新元素时没有任何反应。

我知道问题是我需要使用on()函数来确保在动态生成的元素上捕获所有事件。我已阅读here和here等答案，其中包含各种版本的答案。

我已经尝试了一些方法来改变代码以适用于on() - 但我似乎无法让它工作。

我尝试将整个事情包裹在on()电话中：

$(document).on("click",".confirmation-callback",function(){ 
    alert('i see this message');    <<---- I see this on the new elements
    $('.confirmation-callback').confirmation({
             onConfirm: function(event, element) { 
                   alert('but this alert never shows'); 
              }
          });
});

但是虽然我看到了第一个警报，但confirmation()函数的其余部分从未被调用过。

那么如何在confirmation()运行时强制on()函数运行？

Answer 1

这里的技巧是在AJAX调用成功时绑定事件。 jQuery插件通常不会监听新DOM元素的添加，作者假设我们利用AJAX（或其他动态向DOM添加元素的函数）的回调来将事件绑定到新添加的元素。

您可以做的是使用.success()或更好，.done()（前者已被弃用）：

$.ajax({
    // Do ajax magic here
})
.done(function( data ) {
    $('.confirmation-callback').confirmation({
         onConfirm: function(event, element) { 
               alert('hello');
         }
    });
});

更好：将事件仅绑定到新添加的元素，并使用排序选择器。

Answer 2

你可以这样做：

首先在非ajax的内容上设置一些标志
其次，使用$(document).ajaxSuccess重新绑定尚未绑定的那些。

像这样：

$(document).ready(function () {
    $('.confirmation-callback').confirmation({
        onConfirm: function (event, element) {
            alert('hello');
        }
    }).attr('data-bound', 'true');
}).ajaxSuccess(function () {
    $('.confirmation-callback:not([data-bound="true"])').confirmation({
        onConfirm: function (event, element) {
            alert('hello');
        }
    })
});

更改插件以使用on（）事件绑定

2 个答案: