jquery没有处理附加内容

Question

我有一个jquery函数,在元素循环中的每个元素上显示隐藏的内容.这工作完美,但问题是当我将新元素添加到循环时它停止工作.它实际上适用于某些元素,而不适用于其他元素(奇怪的行为).

<script type="text/javascript">
 jQuery(document).ready(function($) {

 $(".see_all").click(function(){

 if ($(this).next().css('display') == 'none'){
 $(this).next().show();

}
else

if($(this).next().is(':visible')){
   $(this).next().hide();
 }

});
})
</script>

我的jquery代码有问题吗？如何使它适用于新添加的元素和以前显示的元素.

HTML代码

   <div class="center_container">
   <%for users in @user%>
  <div class="see_all">

  <span style="color:#808080;cursor:pointer">See All Reviews(<%=@beep_count=       (@beep.opposes.count +  @beep.neutrals.count + @beep.supports.count)%>)</span>

 </div>

     <div style="display:none;" class="hidden">

      No reviews available 

     </div>
 <%end%>

 </div>

Answer 1

这只适用于使用jQ 1.7+的情况.如果你不是,请看一下jQuery的 委托方法,它将在jQuery <1.7中实现相同的功能.没有理由不使用最新版本,但:)

这是因为在绑定点击处理程序时:

 $(".see_all").click()

它必然只对选择器匹配的当前元素.see_all.

你可以做些什么来解决这个问题是使用jQuery on()来委托:

$("body").on("click", ".see_all", function() {
  //do stuff
});

此处理程序绑定到body,然后当它检测到单击时,它将查看单击的元素是否与选择器匹配.see_all.如果是,则执行该功能.因为它绑定了body,如果新的.see_all元素也插入到DOM中,这将起作用.

如果所有.see_all都包含在一个中div,那么使用它来委托而不是body- 纯粹作为一个例子使用它.代表包含所有.see_all元素的第一件事.

作为旁注,您应该使用新API .on()和.off()事件绑定,因为1.7它们已成为首选方法..on()的文档.