刪除.clickable類后，jQuery click（）仍然被觸發

Question

我有一個點擊事件分配給特定類的div。 單擊發生時，將從div中刪除該類。 但是，您仍然可以單擊div並觸發click()事件（即使該類已被刪除）。 這是一個例子：

HTML：

<div class="clickable">
  <p>Click me</p>
</div>

的JavaScript / jQuery的：

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

我可以看到這些類被刪除並添加（因為我的CSS改變了文本的顏色）。 但是，您仍然可以多次單擊div，並且仍會顯示alert() 。

這似乎也是相反的; 所以，如果我將clickable類添加到div中，則代碼為$('.clickable').click(function() {...}); 不運行（但在視覺上，div根據新樣式而變化）。

即使在jQuery添加/刪除clickable類之后，我怎樣才能使click事件與類匹配？

Answer 1

將事件處理程序附加到DOM元素時，它保持不變。 該類只是引用元素的一種方式，更改類不會取消綁定事件處理程序，因為您必須手動取消綁定處理程序，如果使用jQuery 1.7+ on()和off()是通往走 ：

$('.clickable').on('click', function() {
  $(this).removeClass('clickable').addClass('not-clickable').off('click');
});

這會使元素只能點擊一次，你可以只使用內置的one()函數，因為這會在第一次點擊后自動取消綁定處理程序：

$('.clickable').one('click', function() {
  $(this).removeClass('clickable').addClass('not-clickable');
});

Answer 2

你可以用它

$(document.body).delegate('.clickable', 'click', function(e){
    $(this).removeClass('clickable');
    alert('Clicked!');
});

從jQuery版本1.7 delegate()被on()取代

$(document.body).on('click', '.clickable', function(e){
    $(this).removeClass('clickable');
    alert('Clicked!');
});

要么

$('.clickable').on('click', function(e){
    $(this).removeClass('clickable').off('click');
    alert('Clicked!');
});

你也可以使用方法one() - 它等於綁定，但只發生一次

$('.clickable').one('click', function(e){
    alert('Clicked!');
});

Answer 3

$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

Answer 4

$('.clickable').live('click',function() {
  $(this).removeClass('clickable');//remove the class
  $(this).unbind('click');//to remove the click event
  $(this).addClass('not-clickable');
  alert('Clicked!');
});

Answer 5

unbind click事件 - 比如$(this).unbind('click');' 試試這個

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  $(this).unbind('click');'
});

Answer 6

你對甚至任務的理解有點不對勁。 請閱讀您的代碼

$('.clickable').click(function()

1. 查找類“.clickable”的元素
2. 將onclick處理程序分配給元素

看，它是獲取處理程序的元素，而不是類名。 您需要刪除處理程序。 為此你可以嘗試：

$('.clickable').click(function() {
    $(this).removeClass('clickable');
    $(this).addClass('not-clickable');
    alert('Clicked!');
    $(this).unbind('click');
});

Answer 7

如果你只想調用click事件一次使用jQuery one函數來綁定事件，它將自行銷毀。

$('.clickable').one('click',function() {
   $(this).removeClass('clickable');//remove the class
   $(this).addClass('not-clickable');
   alert('Clicked!');
});