jQuery的點擊（）.clickable下課後仍然被觸發被刪除

Question

我有分配給特定類的一個div click事件。當發生點擊時，該類將從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() {...});代碼不運行（但在視覺上，股利的變化，按新的樣式）。

我怎樣才能讓這個點擊事件匹配的類，jQuery的增加甚至後/刪除clickable類？

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

解除綁定click事件 - 就像$(this).unbind('click');' 試試這個

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

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

你對分配的理解有點不對。 請閱讀你的代碼

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

1. 查找元素與類 '.clickable'
2. 分配onclick處理器的元素

見，那就是得到的處理元素，而不是課程名稱。 您需要刪除處理程序。對於您可以嘗試：

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

Answer 6

您可以使用此

$(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() - 這等於約束，但是如果你想調用點擊事件只有一次使用jQuery one功能綁定的事件會破壞自身發生一次

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

Answer 7

。

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