3

active次のように、クラスを持つ親要素に含まれる要素があります。

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

divのクリックを処理するようにjQueryを設定していますが、buttonそのdivがactive親に含まれている場合に限ります。

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

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

テスト用の簡単なJSFiddleの例を次に示します：http：//jsfiddle.net/KjuDy/。一番上の行のボックスをクリックします。これにより、アラートがポップアップ表示され、active期待どおりにクラスが削除されます。activeクラスが終了した後でも、一番上の行のボックスをクリックすると、問題が発生します。アラートがポップアップしないことを期待しますが、それでもポップアップします。

4

2 に答える 2

6

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

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

より動的にしたい場合は、代わりに要素の祖先にハンドラーを配置します。.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/

于 2011-01-11T19:59:06.670 に答える
1

jQueryは、クリックイベントを最初にバインドしたときに一致するDOM要素にバインドしています。

jQueryライブを見てください。

于 2011-01-11T19:58:18.870 に答える