Jquery - 從元素中刪除類后仍然有效

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");

---

jQuery的早於1.7版本最好用.unbind代替.off 。

Answer 2

您必須將事件處理程序委托給DOM樹的更高位置，或者顯式取消綁定事件處理程序。 一旦事件綁定到元素，只更改類名將不會刪除事件處理程序。

要刪除事件處理程序（ 更新小提琴 ）：

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

委托事件處理程序（ 更新小提琴 ）：

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

委托方法起作用的原因是jQuery在冒泡到選定元素（在本例中為document ）后捕獲事件。 它檢查事件目標是否與選擇器匹配，如果匹配，則執行事件處理程序。 如果您已刪除該類，則目標將不再與選擇器匹配。