我删除类后JQuery选择器仍然工作？ [英] JQuery selector still working after I remove the class?
问题描述
我有两个一起工作的jquery函数，一个取决于一个类，另一个取消类。
一旦删除，我希望功能停止工作，但它继续？
发生了什么事？
以下是 fiddle ，自己尝试一下。
< div class =禁用容器>
< a href =www.google.com>转到Google< / a>
< / div>
< label>
< input type =checkbox/>启用链接< / label>
JS
< （）函数（e）{
e.preventDefault（）;
e.stopPropagation（）;
alert（'应该停止工作'）;
}）;
$ b $（'input [type = checkbox]'）。change（function（）{
$（'。container'）。removeClass（'disabled'）;
} ）;
看起来您希望使用委托事件处理程序而不是静态事件处理程序。让我解释一下。
当你运行这样一行代码时：
$（'。disabled> a'）。click（function（e）{
这会在任何匹配选择器的对象上安装一个事件处理程序，然后这些事件处理程序会永久存在，它们不再查看任何元素具有哪些类，因此，在安装静态事件处理程序之后更改类不影响哪些元素具有事件处理程序。
如果您想要动态行为，哪些元素响应事件取决于在任何给定时刻存在哪些类，那么您需要使用委托事件处理。
使用委托事件处理，您将事件永久附加到父项，然后父项会评估事件发生的子项每次事件触发时都会匹配select，如果孩子不再匹配select，那么事件处理程序将不会是tr iggered。如果是这样，那么它会和你可以添加/删除一个类，使它改变行为。
委托事件处理程序的一般形式是这样的： （click，.childSelector，fn）;>
$（＃staticParent）。
理想情况下，您希望选择尽可能靠近孩子的父母，但不是动态的本身。在你的特殊例子中，你不会显示父对象而不是body对象，所以你可以使用它：
$（document （）;
e.stopPropagation（）;
alert（'should停止工作'）;
}）;
当您添加删除 disabled class。如果存在 disabled 类，则事件处理程序将触发。如果它不存在，事件处理程序将不会触发。
演示： http://jsfiddle.net/jfriend00/pZeSA/
有关委托事件处理的其他参考：
jQuery .live（）vs .on（）加载动态html后添加点击事件的方法
I have two jquery functions that work together, one depends on a class, another removes the class.
Once it is removed I would expect the functionality to stop working, but it carries on?
Whats going on?
Here is the fiddle, try it out for yourself.
<div class="container disabled">
<a href="www.google.com">Go to Google</a>
</div>
<label>
<input type="checkbox" />Enable link</label>
The JS
$('.disabled > a').click(function (e) {
e.preventDefault();
e.stopPropagation();
alert('should stop working');
});
$('input[type=checkbox]').change(function () {
$('.container').removeClass('disabled');
});
It looks like you want to be using delegated event handlers rather than static event handlers. Let me explain.
When you run a line of code like this:
$('.disabled > a').click(function (e) {
this installs an event handler on any objects that match the selector at that moment in time. Those event handlers are then in place forever. They no longer look at what classes any elements have. So changing a class after you install a static event handler does not affect which elements have event handlers on them.
If you want dynanamic behavior where which elements respond to an event does depend upon what classes are present at any given moment, then you need to use delegated event handling.
With delegated event handling, you attach the event "permanently" to a parent and then the parent evaluates whether the child where the event originated matches the select each time the event fires. If the child no longer matches the select, then the event handler will not be triggered. If it does, then it will and you can add/remove a class to cause it to change behavior.
The general form of delegated event handlers are like this:
$("#staticParent").on("click", ".childSelector", fn);
You ideally want to select a parent that is as close to the child as possible, but is not dynamic itself. In your particular example, you don't show a parent other than the body object so you could use this:
$(document.body).on("click", ".disabled > a", function() {
e.preventDefault();
e.stopPropagation();
alert('should stop working');
});
This code will then respond dynamically when you add remove the disabled class. If the disabled class is present, the event handler will fire. If it is not present, the event handler will not fire.
Working demo: http://jsfiddle.net/jfriend00/pZeSA/
Other references on delegated event handling:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
jQuery .on does not work but .live does
Should all jquery events be bound to $(document)?
JQuery Event Handlers - What's the "Best" method
jQuery selector doesn't update after dynamically adding new elements
这篇关于我删除类后JQuery选择器仍然工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
