[英]Why is jQuery not working on appended content?
我有一个 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 的委托方法,它将在 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
,请使用它来委托 on 而不是body
- .see_all
作示例。 委托给包含所有.see_all
元素的第一件事。
作为旁注,您应该使用新的 API .on()
和.on()
.off()
进行事件绑定,自 1.7 以来,它们已成为首选方法。 .on() 的文档。
首先,这可以使用切换进行优化。 然后,您将需要一个 on() 事件处理程序,因为 click 仅绑定到文档就绪时已经存在的元素。 当添加新元素时,您需要一种动态重新绑定点击事件的方法。
<script type="text/javascript">
jQuery(document).ready(function($) {
$("body").on('click', '.see_all', function(){
$(this).next().toggle();
});
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.