$(".post").on("click",show_hide_posts);
//Callback function from third-party ajax plugin
$.fn.almComplete = function(alm){
$(".post").on("click",show_hide_posts);
}
当document.ready我绑定到.post。通过ajax加载更多内容时,我使用回调函数来绑定新帖子。这使得旧帖子无法正常工作。
show_hide_posts具有一个简单的hasClass,用于检查帖子在单击时是否应显示/隐藏。加载新帖子后,此hasClass检查在旧帖子上失败,但仍适用于新帖子。
function show_hide_posts(){
e.preventDefault();
if(!$(this).hasClass('closed')){
//hide post
$(this).addClass("closed");
}else{
//show post
$(this).removeClass("closed");
}
}
我的这种行为是多次竞标同一选择器的结果吗?还是我想念其他东西?
最佳答案
我的这种行为是多次竞标同一选择器的结果吗?还是我想念其他东西?
是的,您绑定的不止一次。
假设您具有以下HTML:
<div class="posts">
<div class="post">A</post>
<div class="post">B</post>
</div>
你打电话
$(".post").on("click",show_hide_posts);
因此,现在
A
和B
具有单击处理程序。然后,您将ajax / html更新为:<div class="posts">
<div class="post">A</post>
<div class="post">B</post>
<div class="post">C</post>
<div class="post">D</post>
</div>
并致电:
$(".post").on("click",show_hide_posts);
现在
A
和B
具有两个处理程序,而C
和D
具有一个处理程序。当document.ready我绑定到.post。通过ajax加载更多内容时,我使用回调函数来绑定新帖子。这使得旧帖子无法正常工作。
正确,因此解决方案不是直接绑定到
.post
:$('.posts').on('click', '.post', show_hide_posts);
这适用于任意数量的动态添加的帖子,并且
.post
中的所有.posts
都有一个处理程序,因此不再需要再次调用。其他说明:
您很可能不应该这样做:
e.preventDefault();
这会引起很多问题。
您还可以替换:
if(!$(this).hasClass('closed')){
$(this).addClass("closed");
}else{
$(this).removeClass("closed");
}
与:
$(this).toggleClass("closed");