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 should preferably使用.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）。它檢查事件目標是否匹配選擇器，如果是，則執行事件處理程序。如果您已經移除了課程，目標將不再與選擇器匹配。