.clickableクラスが削除された後、jQueryのclick（）がまだトリガーされています

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() {...});のコードは実行されません（ただし視覚的にはdivは新しいスタイルに従って変更されます）。

jQueryがclickableクラスを追加/削除した後でも、クリックイベントがクラスと一致するようにするにはどうすればよいですか？

Answer 1

、それがそのままとどまる試してみてください。 クラスは単に要素を参照する方法であり、クラスを変更するとイベントハンドラのバインドは解除されません。ハンドラを手動でバインド解除する必要があります.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

アンバインドクリックイベント - $(this).unbind('click');' のようなあなたはDOM要素にイベントハンドラをアタッチすると、これは

$('.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

あなたはjQueryのバージョン1.7 delegate()からこの

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

を使用することができますがまた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!'); 
});