gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 02:22:21 24 4
gpt4 key购买 nike

我正在使用无限滚动插件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 (这样就不会重复)?

最佳答案

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

关于javascript - 无限滚动更新后附加事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12819634/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com