23

特定のクラスの 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ですか?

4

7 に答える 7

31

イベント ハンドラーを 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');
});
于 2012-08-16T09:20:47.400 に答える
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()-バインドと同じですが、1回発生します

$('.clickable').one('click', function(e){
    alert('Clicked!');
});
于 2012-08-16T09:26:57.507 に答える
3 
$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  alert('Clicked!');
});
于 2012-08-16T09:20:11.360 に答える
2 
$('.clickable').live('click',function() {
  $(this).removeClass('clickable');//remove the class
  $(this).unbind('click');//to remove the click event
  $(this).addClass('not-clickable');
  alert('Clicked!');
});
于 2012-08-16T09:23:00.907 に答える
0

クリック イベントを 1 回だけ呼び出したい場合は、jQueryone関数を使用してイベントをバインドし、それ自体が破棄されます。

$('.clickable').one('click',function() {
   $(this).removeClass('clickable');//remove the class
   $(this).addClass('not-clickable');
   alert('Clicked!');
});
于 2012-08-16T09:29:52.610 に答える
0

クリックイベントのバインドを解除する-$(this).unbind('click');' これを試してください

$('.clickable').click(function() {
  $(this).removeClass('clickable');
  $(this).addClass('not-clickable');
  $(this).unbind('click');'
});
于 2012-08-16T09:18:56.293 に答える
0

偶数割り当ての理解は少し間違っています。コードを読んでください

$('.clickable').click(function()
  1. クラス「.clickable」の要素を検索
  2. onclick ハンドラを要素に割り当てる

クラス名ではなく、ハンドラーを取得するのは要素です。ハンドラーを削除する必要があります。そのために試すことができます：

$('.clickable').click(function() {
    $(this).removeClass('clickable');
    $(this).addClass('not-clickable');
    alert('Clicked!');
    $(this).unbind('click');
});
于 2012-08-16T09:23:06.280 に答える