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

我使用无限滚动插件加载页面内容

我有一个jQuery事件侦听器，例如：

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

该get已加载到

$（document）.ready

。但是，当使用

infinitescroll

加载新内容时，事件侦听器不会应用于/可用于新内容。因此，我创建了一个函数，该函数在

infinitescroll

的回调中调用（当所有内容都已加载时）。该函数：

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

然而，最终发生的情况是，当单击包含

的链接时，旧内容（已加载）。像action类

，无论新内容加载多少次+原始

$（文档）。ready

，都会调用

likeComment

函数

例如：内容在页面加载时加载。单击链接执行

likeComment

1。向下滚动并加载新内容（并回调）后，如果您单击与以前相同的链接，

likeComment

将执行两次。等等等等

我做错了什么

我的事件侦听器是否编写错误

有没有一种方法可以编写一个侦听器，它可以自动为

DOM

中的所有元素工作，即使它们在页面加载时不在那里

---

或者，是否有一种方法可以只注册刚刚通过无限滚动加载的元素上的.on（因此没有重复）？

更改

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();
}

---

如果有人有兴趣在没有jQuery的情况下这样做，这里有一个很棒的帖子-

基本示例：

document.querySelector(staticParent).addEventListener(eventName, function (event) {
  if (event.target.classList.contains(dynamicChildSelector)) {
    // Do something
  }
})

工作示例：

document.querySelector('.feed').addEventListener('click', function (event) {
  if (event.target.classList.contains('feed-item')) {
    // Do something
  }
})

---

jbabey，这是如何工作的，比如：

$（document）.ready（function（）{$（'.profilecard'）.hovercard（）；}）因为从技术上讲，这不是附加一个事件处理程序？jbabey，只是将更改添加到了.on，它就像一个champ！谢谢好的，那么事件处理程序和添加插件初始化之间的区别是因为插件被“附加”到DOM元素？那么，初始化类用于检查它是否已附加？将有助于解释它为什么适用于事件（
委托
与

上的

相同，只是更旧）。插件的初始化不会像事件一样传播DOM，因此它不能被委派。