0

ここではバックボーンを使用していますが、バックボーン以外のサイトでもこの問題が発生しています。

基本的に、私の問題は、1つのjavascriptファイルbase.jsで、いくつかの「グローバル」jquery関数を定義することです。次に、新しい要素をロードし、Backbone、AJAX、または任意の非同期呼び出しを使用してページに追加します。これは、新しいオブジェクトがページロードで宣言したjQueryイベントにリンクされていないように見えることを除いて、うまく機能します。（ここでは素人の言葉で申し訳ありません-私は適切な言葉遣いの初心者であることがよくあります）

たとえば、pageloadにロードされたjsファイルで宣言するとします。

 $('.element').hover(function(){alert('hi world')});

しかし、ページの読み込み後に新しい要素を追加すると、このホバーは機能しません。

誰でも説明できますか：

  1. なぜですか？
  2. すでに宣言されている現在のイベントを処理/リッスンするように、新しく追加された要素を強制できるかどうか。

（2）は不可能かもしれない（追加後にイベントを書き直さなければならない）と思うが、何らかの解決策があるかどうか知りたい。

4

1 に答える 1

5

なぜですか？

イベントバインディングコードが実行されるとき、DOMにまだ存在しない要素は影響を受けないため（どうしてそうなるのでしょうか？まだ存在していません！）「通常の」イベントバインディングメソッド（.click()または.change()）は、一致したセット内のすべての要素へのイベントハンドラー関数のコピー。

すでに宣言されている現在のイベントを処理/リッスンするように、新しく追加された要素を強制できますか？

実際、DOMツリーの上位にあるイベントハンドラーを委任することで可能です。ほとんどのDOMイベントは、それらが発生した要素からツリーをバブルアップするため、これはうまく機能します。jQueryを使用すると、.on()（jQuery 1.7+-古いバージョンでは.delegate()代わりに使用）メソッドを使用してこれを行うことができます。

$("#someCommonAncestor").on("someEvent", ".element", function () {
    // Do stuff
});

呼び出す要素は.on()、コードの実行時にDOMに存在している必要があります。イベントが発生して何にでも到達#someCommonAncestorできるようになると、jQueryは、ターゲット要素が渡されたセレクターと一致するかどうかを確認します.on()。含まれている場合は、イベントハンドラーを実行します。そうでない場合、イベントはドキュメントのルートにバブリングし続け、ハンドラーをトリガーしません。

于 2012-12-06T15:30:34.587 に答える