javascript - 无限滚动更新后附加事件处理程序

Question

我正在使用无限滚动插件http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/加载页面内容。

我有一个 jQuery 事件监听器，例如:

$('.like-action').on('click',
    function(event){
      likeComment($(this)); 
      event.preventDefault();
});

该内容已加载到 $(document).ready 上。但是，当使用 infinitescroll 加载新内容时，事件监听器不会应用于/不可用于新内容。因此，我创建了一个在 infinitescroll 的回调中调用的函数(当所有内容已加载时)。该函数:

function afterUpdate(){
$('.like-action').on('click',function(event){
      likeComment($(this)); 
      event.preventDefault();
});}

然而，最终发生的情况是，当单击具有 .like-action 类 的链接时，对于旧内容(已加载)，likeComment无论新内容已加载多少次，都会调用该函数 + 原始 $(document).ready。

例如:内容在页面加载时加载。链接在点击时执行 likeComment 1。向下滚动并加载新内容(和回调)后，如果您单击与之前相同的链接，则 likeComment 会执行两次。等等等等

我在这里做错了什么？

我的事件监听器写得不正确吗？

有没有一种方法可以编写一个监听器，自动为 DOM 中的所有元素工作，即使它们在页面加载时不存在？

或者，有没有办法只在刚刚通过无限滚动加载的元素上注册 .on (这样就不会重复)？

Answer 1

更改 on() 的用法以传递选择器，它将使用事件委托(delegate)，从而使点击处理程序也适用于所有 future 的元素:

$('#someContainer').on('click', '.like-action', function (event){
    likeComment($(this)); 
    event.preventDefault();
});

这将防止您的点击处理程序需要再次添加，从而解决将它们多次添加到旧元素的问题。

这假设您当前和 future 的所有 .like-action 元素都将包含在 #someContainer 内。

编辑:为了回应您的评论，您不能像这样委托(delegate)插件初始化。你可以做的是:当你初始化一个元素时，也向它添加一个类:

$('.profilecard').hovercard().addClass('initialized');

然后在回调中，当您需要初始化新类时，跳过任何已经具有该类的内容:

function afterUpdate(){ 
    $('.profilecard:not(".initialized")').hovercard();
}