$(".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);


因此,现在AB具有单击处理程序。然后,您将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);


现在AB具有两个处理程序,而CD具有一个处理程序。


当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");

10-05 21:07
查看更多