ajaxComplete() 中的 .on() 事件处理程序？

Question

我有这个：

$('.task').on('click', function()
{
    task_id = $(this).data('id');
    console.log('Task id: ' + task_id);
});

但是当通过ajax重新加载内容时，这不起作用。task_id即使在 ajax 重新加载后单击不同元素后，值也保持不变。显然我必须将它绑定到body一个。

这就是我现在代码中的情况（它按预期工作）：

$(document).ajaxComplete(function(event, xhr, settings) {
    $('.task').on('click', function()
    {
        task_id = $(this).data('id');
        console.log('Task id: ' + task_id);
    });
});

但有人告诉我这会重复/加倍触发.on('click')事件？这是真的？我怎么知道什么时候绑定到直接选择器或绑定到document.body？哪个会更有效率？绑定到body事件委托或将事件委托放入其中ajaxComplete()？

我也有点困惑，因为我在同一个.js文件中有其他事件处理程序，但ajaxComplete()即使在 ajax 重新加载后，这些事件处理程序似乎也能正常工作？

Answer 1

当动态生成元素（内容通过）/操作选择器更新时，您应该使用.on()具有事件委托方法的方法$.ajax()。那么你将不需要附加事件处理程序ajaxComplete()

一般语法

$(document).on('event','selector',callback_function)

例子

$(document).on('click', '.task', function(){
    //Rest of your code
});

代替document您应该使用最近的静态容器。

委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将点击事件绑定到动态创建的元素，并避免频繁附加和删除事件处理程序的需要。