为什么jQuery不处理附加内容

Why is jQuery not working on appended content?

本文关键字：处理 jQuery 为什么      更新时间：2023-09-26

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

只有当您使用jQ 1.7+时，这才有效。如果您不使用，请查看jQuery的delegate方法，它将在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（）.的文档

首先，这可以使用toggle进行优化。然后，您将需要一个on（）事件处理程序，因为单击只绑定到文档就绪上已经存在的元素。添加新元素时，需要一种动态重新绑定单击事件的方法。

<script type="text/javascript">
 jQuery(document).ready(function($) {
 $("body").on('click', '.see_all', function(){
  $(this).next().toggle();
});
})
</script>
相关文章：