3 
$('.example').hover(
  function () {
    $(this).css('background','red');
  }, 
  function () {
    $(this).css('background','yellow');
  }
);

$('.test').click(function(){
    $(this).css('marginTop','+=20px').removeClass('example');
  }
);

<div class="text example"></div>

クラスexampleは削除されたように見えますが、そのためのhoverアクションは、かつてそのクラスを持っていた要素に引き続き適用されています。どうすればこれを防ぐことができますか？

http://jsfiddle.net/gSfc3/

これはjsFiddleにあります。ご覧のとおりclick、クラスを削除する関数を実行した後も、ホバーすると背景が変わります。

4

4 に答える 4

1

イベントハンドラーはノードにバインドされているため、そのノードが特定のclassNameを所有していないかどうかは関係ありません。これらのイベントを手動で行う必要があります。.unbind()または、jQuerys.off()メソッドを使用することをお勧めします。

したがって、そのノードにバインドされている他のイベントハンドラーがないことを確認できる場合は、

$(this).css('marginTop','+=20px').removeClass('example').off();

これにより、そのノードからすべてのイベントハンドラーが削除されます。具体的にする必要がある場合は、jQuerysイベントの名前空間を次のように使用できます。

$('.example').on( 'mouseenter.myNamespace'
   function () {
       $(this).css('background','red');
   }
).on('mouseleave.myNamespace'
   function() {
       $(this).css('background','yellow');
   }
);

この呼び出しを使用して、名前空間内にあるすべてのイベントのバインドを解除するだけです.myNamespace

$(this).css('marginTop','+=20px').removeClass('example').off('.myNamespace');
于 2012-04-24T18:28:47.260 に答える
0

$('.example').unbind('mouseenter').unbind('mouseleave')

コードで$('.example').hover、mouseenterとmouseleaveを各要素に直接アタッチします。

-また-

より良い解決策は、委任を使用することかもしれませんon

$(document.body).on('mouseenter', '.example', function() { ... });
$(document.body).on('mouseleave', '.example', function() { ... });

そのコードを使用するとexample、ハンドラーはcssセレクターに基づいており.hover、要素に直接アタッチされるため、クラスの削除は期待どおりに機能します。

于 2012-04-24T18:27:22.253 に答える
0 
$('.example').live({
    mouseenter:function () {
        $(this).css('background','red');
    },
    mouseleave:function () {
        $(this).css('background','yellow');
    }
});

デモ： http： //jsfiddle.net/gSfc3/1/

于 2012-04-24T18:28:21.583 に答える
0

これを試して：

$('.test').hover(
    function () {
        $('.example').css('background','red');
    },
    function () {
        $('.example').css('background','yellow');
    }
);
于 2012-04-24T18:32:12.733 に答える