Javascript 删除类后JQuery选择器仍在工作吗?
我有两个共同工作的jquery函数,一个依赖于类,另一个删除类 一旦它被删除,我希望功能停止工作,但它会继续吗 发生什么事了 这是你的建议,你自己试试看Javascript 删除类后JQuery选择器仍在工作吗?,javascript,jquery,html,Javascript,Jquery,Html,我有两个共同工作的jquery函数,一个依赖于类,另一个删除类 一旦它被删除,我希望功能停止工作,但它会继续吗 发生什么事了 这是你的建议,你自己试试看 <div class="container disabled"> <a href="www.google.com">Go to Google</a> </div> <label> <input type="checkbox" />Enable link&l
<div class="container disabled">
<a href="www.google.com">Go to Google</a>
</div>
<label>
<input type="checkbox" />Enable link</label>
看起来您希望使用委托事件处理程序而不是静态事件处理程序。让我解释一下 当您运行这样一行代码时:
$('.disabled > a').click(function (e) {
$("#staticParent").on("click", ".childSelector", fn);
这将在与选择器匹配的任何对象上安装事件处理程序。然后,这些事件处理程序将永远就位。他们不再关注任何元素都有哪些类。因此,在安装静态事件处理程序后更改类不会影响哪些元素上有事件处理程序
如果您想要动态行为,其中哪些元素响应事件取决于在任何给定时刻存在哪些类,那么您需要使用委托事件处理
通过委托事件处理,可以将事件“永久”附加到父级,然后父级在每次触发事件时评估事件发生的子级是否与select匹配。如果子级不再与select匹配,则不会触发事件处理程序。如果是这样,那么它会这样做,您可以添加/删除一个类以使其改变行为
委托事件处理程序的一般形式如下:
$('.disabled > a').click(function (e) {
$("#staticParent").on("click", ".childSelector", fn);
理想情况下,您希望选择一个尽可能靠近子对象但本身不是动态的父对象。在您的特定示例中,除了body对象之外,您不显示父对象,因此可以使用:
$(document.body).on("click", ".disabled > a", function() {
e.preventDefault();
e.stopPropagation();
alert('should stop working');
});
当您添加或删除禁用的类时,此代码将动态响应。如果禁用的类存在,事件处理程序将触发。如果它不存在,事件处理程序将不会启动
工作演示:
关于委托事件处理的其他参考资料:
当选择器运行时,它会获得一个元素列表,包括有问题的元素,并向其中添加一个单击事件处理程序
然后删除该类——因此任何后续jQuery选择器都不会获取您的元素——但您已经附加了该事件,因此它仍然会触发
您使用的选择器在您声明的行上运行-当单击发生时,它不会延迟初始化。在绑定事件处理程序后更改类绝对没有任何效果,因为事件处理程序不是突然解除绑定,它仍然绑定到同一元素
您必须检查事件处理程序中的类
$('.container > a').click(function (e) {
if ( $(this).closest('.container').hasClass('disabled') ) {
e.preventDefault();
e.stopPropagation();
}
});
$('input[type=checkbox]').change(function () {
$('.container').toggleClass('disabled', !this.checked);
});
即使已删除该类,该操作也已绑定到该元素。它不会自动解除绑定。为什么不直接使用委派的事件处理程序,使事件处理程序本身对添加/删除的类作出动态响应?@jfriend00-这是一个选项,在这种情况下,我只检查类的存在,但这只是我的问题,任何一种方式都可以。@jfriend00-委派的处理程序就是这样做的,它检查目标是否有该类,所以我自己做就限制了事件处理程序触发的元素数量,而且我至少认为这样更有效。我在发布问题后发现了这一点,但非常详细的解释。回答很棒。谢谢。这就是我在谷歌上搜索了一个小时的内容。非常感谢你!!