0

私のホームページには、このボタンがあります。

<button class="test">test</button>

そして、私の現在のコードには、このスクリプトがあります

$('.test').on('click',function(){
        alert("YOU CLICKED ME");
    });

現在、私のアプリケーションは ajax 化されているため、新しいページをクリックするたびに ajax として読み込まれます。問題は、読み込まれたページにもこのボタンがあることです。そしてそのマークアップはこんな感じです

<div id ="firstDiv>
   <div id ="secondDiv">       
  <button class="test">test</button>
  </div>
</div

新しいコンテンツにも「#test」がありますが、そのボタンをクリックしても、作成したイベント ハンドラーが実行されないのはなぜですか?

4

4 に答える 4

3 
var $bdy=$(document.body);     

$bdy.on('click','.test',function(){
    alert("YOU CLICKED ME");
});

いつでも好きなときに.testを追加してください

于 2013-02-08T11:43:26.740 に答える
0

コンテンツはAJAXで取得したデータを介して読み込まれるとおっしゃっていましたが、これが発生している可能性のあるシナリオです。

  1. <button class="test">test</button>描かれています
  2. 次に、クリックイベントにバインドされます
  3. ajaxを介して新しいデータをロードします
  4. バインドしないようにしてください。

これは、最初にクリックイベントを「テスト」要素にバインドしたときに、そのクラスがDOMの一部であるためです。ajax呼び出しの後にマークアップを追加すると、要素はDOMの一部になりますが、新しいマークアップを作成した後、最初にクリックイベントのバインドを解除する必要があります。ここを参照してください。次に、クリックイベントを再バインドします。これにより、クラス「test」を持つすべての要素にイベントがバインドされます。

PS実装の仕様はわかりませんが、他の人が提案しているように、イベントをクラスではなくIDにバインドする必要があります。

于 2013-02-08T13:12:46.867 に答える
0

私はついに解決策を見つけました。私がする必要があったのは、これである静的コンテナを定義することだけでした

$('#staticdiv').on('click','.test',function(){
        alert("YOU CLICKED ME");
    });

そしてそれは問題を修正しました

于 2013-02-08T13:25:30.973 に答える
0

新しいコンテンツにも「#test」がありますが、そのボタンをクリックしても、作成したイベント ハンドラーが実行されないのはなぜですか?

ハンドラーは実際の要素にアタッチされているためです。そのため、要素が削除され、同じクラスの新しい要素が作成された場合、イベントはその新しい要素に関連付けられません。

これを処理するには、イベント委任を使用できます。

$(document.body).delegate('.test', 'click', function(){
    alert("YOU CLICKED ME");
});

また

$(document.body).on('click', '.test', function(){
    alert("YOU CLICKED ME");
});

(それらは同じことを行います。引数の順序が異なることに注意してください。私delegateは明確にすることを好みますが、ほとんどの人は代わりに過負荷のonメソッドの委任バージョンを使用していると思います。)

のクリックを監視しますが、クリックがそのセレクター (この場合は ) にdocument.body一致する要素を通過した場合にのみ、ハンドラーを起動します。.test

于 2013-02-08T11:43:52.150 に答える