Question

我有这个：

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

但是，当通过ajax重新加载内容时，这不起作用。即使在ajax重新加载后单击不同的元素，task_id值也保持不变。显然我必须首先将它绑定到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

当动态生成元素（内容通过$.ajax()更新）/操纵选择器时，您应该使用.on()方法和Event Delegation方法。然后你不需要在ajaxComplete()

中附加事件处理程序

一般语法

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

实施例

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

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

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

.on（）ajaxComplete（）里面的事件处理程序？

1 个答案: