3

我有一个 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>
4

2 回答 2

5

这仅在您使用 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内容都包含在 onediv中，请使用 that 来委托而不是body- 仅将其用作示例。委托给包含所有.see_all元素的第一件事。

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

于 2012-08-21T11:22:35.033 回答
2

首先，这可以使用切换进行优化。然后，您将需要一个 on() 事件处理程序，因为 click 只绑定到文档准备好的现有元素。添加新元素时，您需要一种动态重新绑定单击事件的方法。

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

 $("body").on('click', '.see_all', function(){
  $(this).next().toggle();
});
})
</script>
于 2012-08-21T11:21:26.627 回答