domツリー変更後のjQueryイベント

Question

mouseoverやmo​​useoutのようなjQueryイベントを使用しています。

ターゲット要素でマウスオーバーすると、この要素は（removeClassとaddClassを使用して）新しいクラスを受け取ります。

マウスが出ると、mouseoutが発生しますが、mouseoutイベントを持つ要素のセレクタは、クラスを変更したため、もはや一致しません。

例：

$('span.project_unsel').mouseover(function() { 
    $(this).removeClass('project_unsel'); 
    $(this).addClass('project_sel'); 
}); 

上記のイベントを発射した後、クラスが変更されていると、次は発生しません。

$('span.project_sel').mouseout(function() { 
    $(this).removeClass('project_sel'); 
    $(this).addClass('project_unsel'); 
}); 

jQueryに再度「更新」または「バインド」するように指示する方法を教えてください。

多くの感謝！

Answer 1

私は物事があまり混乱作るために、代わりにこのような何かをやってお勧めします：

$('span.project').hover(function() { 
    $(this).addClass('selected'); 
}, function() { 
    $(this).removeClass('selected'); 
}); 

クラス.projectを持つ要素に.hoverを結合し、場合、およびMouseEnterイベントは、（単に.selectedクラスを追加し、削除すること最初の引数）とmouseleave（2番目の引数）のイベントがトリガされます。

.hoverをご覧ください。

Answer 2

これを修正するにはいくつかの方法がありますが、コードの変更を最小限に抑えるには、変更しないターゲット要素に別のクラスを追加してバインドします。

あなたには、いくつかの理由のための追加クラスを追加することができない場合は、これを試してみてください。

$('span.project_sel,span.project_unsel').mouseout(function() { 
    $(this).removeClass('project_sel').addClass('project_unsel'); 
}).mouseover(function() { 
    $(this).removeClass('project_unsel').addClass('project_sel'); 
}); 

あなたは無粋で追加/削除を感じる場合にもtoggleClass()を見てみることができます。

編集：Karimのホバーソリューションは、マウスアウト/マウスオーバーで行うよりも優れています。