当前位置 : 主页 > 网页制作 > JQuery >

当我删除一个类时,为什么我的jQuery选择器没有注意到?

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有一个元素包含在父元素中,类是活动的,如下所示: 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/

网友评论