我有一个元素包含在父元素中,类是活动的,如下所示: div class="active" div class="button"/div/div 我有jQuery设置来处理我的按钮div上的单击,但仅当该div包含在活动父级时,如下所示: $('.active
<div class="active"> <div class="button"></div> </div>
我有jQuery设置来处理我的按钮div上的单击,但仅当该div包含在活动父级时,如下所示:
$('.active .button').click(function(){ alert('Button clicked!'); });
我使用jQuery从父级中删除活动类,甚至在删除类之后,当我单击按钮时仍会弹出警报.这似乎很不寻常,因为按钮不再符合选择器的标准.它发生在Chrome,Firefox和IE中,所以它似乎是故意的行为.我错过了什么吗?或者至少有一种简单的解决方法吗?
这是一个用于测试目的的简单JSFiddle示例:http://jsfiddle.net/KjuDy/.单击顶行中的框.这会弹出警报并按预期删除活动类.即使在活动类消失后单击顶行中的框,也会出现问题.我希望警报不会弹出,但它仍然会.
处理程序根据运行时在选择器中找到的结果分配一次(我猜想DOM准备就绪).之后修改这些元素的类不会影响绑定的处理程序.
如果您希望它更具动态性,请将a .delegate()
处理程序放在元素的祖先上,
$('#someContainer').delegate('.active .button','click',function(){ alert('Button clicked!'); });
如果包含所有元素的唯一容器是< body>,那么使用:
$('body').delegate('.active .button','click',function(){ alert('Button clicked!'); });
您的示例,已更新:http://jsfiddle.net/KjuDy/1/