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

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 class,该likeComment函数被调用,但是已经多次加载新内容+原始内容$(document).ready.

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

我在这做错了什么？

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

有没有办法编写一个自动适用于所有元素的监听器,DOM即使它们在页面加载时不存在？

或者,有没有办法只在无限滚动加载的元素上注册.on(所以没有重复)？

Answer 1

更改您的使用情况on()以传递选择器,它将使用事件委托,使点击处理程序也适用于所有未来的元素:

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

这样可以防止您的点击处理程序再次需要添加,解决了多次向旧元素添加它们的问题.

这假设您的所有当前和未来.like-action元素都将包含在其中#someContainer.

编辑:响应您的评论,您不能像这样委托插件初始化.你可以做的是:当你初始化一个元素时,也要为它添加一个类:

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

然后在你需要初始化新的回调时,跳过已有该类的任何东西:

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