クラスを削除したときにjQueryセレクターが気付かないのはなぜですか？

StackOverflow https://stackoverflow.com/questions/4661956

質問

私はクラスの親要素に含まれる要素を持っています active, 、 そのようです：

<div class="active">
    <div class="button"></div>
</div>

私は私のクリックを処理するためにjqueryを設定しています button divですが、そのdivがによって含まれている場合にのみ active 親、そうするように：

$('.active .button').click(function(){
    alert('Button clicked!');
});

jqueryを使用して削除します active 親からのクラス、そしてクラスを削除した後でも、ボタンをクリックするとアラートがまだ表示されます。ボタンがセレクターの基準を満たしなくなったため、これは非常に珍しいようです。 Chrome、Firefox、IEで発生するため、意図的な行動のようです。私は何かが足りませんか？それとも、少なくともこれを回避する簡単な方法はありますか？

これがテスト目的のための簡単なJSFiddleの例です。 http://jsfiddle.net/kjudy/. 。一番上の行のボックスをクリックします。これにより、アラートが表示され、削除されます active 予想通りクラス。問題は、上の行のボックスをクリックすると、 active クラスはなくなりました。アラートがポップアップしないことを期待しますが、それでもそうです。

役に立ちましたか？

解決

ハンドラーは、セレクターが実行されたときに見つかった結果に基づいて1回割り当てられます（DOMの準備ができていると推測しています）。

その後、これらの要素のクラスを変更することは、バインドされたハンドラーに影響しません。

あなたがそれをもっとダイナミックにしたいなら、場所 a .delegate() 代わりに、要素の祖先でハンドラー、

$('#someContainer').delegate('.active .button','click',function(){
    alert('Button clicked!');
});

すべての要素を含む唯一のコンテナが <body>, 、それを使用してください：

$('body').delegate('.active .button','click',function(){
    alert('Button clicked!');
});

あなたの例、更新： http://jsfiddle.net/kjudy/1/

他のヒント

jQueryは、クリックイベントを最初にバインドするときに一致するDOM要素に拘束されます。

jqueryを見てください 住む.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top