Question

我不知道它是否应该是这样的，我正在做一些根本错误的事情。

我有一个给定班级的div，当您点击div时，它会给出回复，但后来又有另一个div，当点击那个时，它会删除来自第一个div的课程。

但是当我在删除课程后继续点击第一个div时，我会继续得到回复。

为什么在我删除课程后点击会继续响应？

HTML

<div class="testing">Testing</div>

<div id="testing_remover">Remove class from testing</div>

JS：

$(document).ready(function(){
    $('.testing').click(function(){
        console.log('testing is active');
    });

    $('#testing_remover').click(function(){
        $('.testing').removeClass('testing');
    });
});

小提琴：http://jsfiddle.net/P3NpK/

Answer 1

事件处理程序绑定到元素，而不是选择器。

要删除处理程序，请使用.off()：

$(".testing").off("click");

1.7 should preferably之前的jQuery版本使用.unbind而不是.off。

Answer 2

您必须将事件处理程序委托给DOM树更高的位置，或者显式取消绑定事件处理程序。一旦事件绑定到元素，只需更改类名称就不会删除事件处理程序。

删除事件处理程序（updated fiddle）：

$('#testing_remover').click(function(){
    $('.testing').off('click');
});

委派事件处理程序（updated fiddle）：

$(document).on("click", ".testing", function(){
    console.log('testing is active');
});

委托方法的工作原理是，jQuery在冒泡到选定元素（在本例中为document）后捕获事件。它检查事件目标是否与选择器匹配，如果匹配，则执行事件处理程序。如果您删除了该类，则目标将不再与选择器匹配。

Jquery - 从元素中删除类后仍然有效

2 个答案: