0

誰かがこの問題への良いアプローチをアドバイスできますか？

ページの読み込み時に、イベントハンドラーがページ要素に追加されます。例えば：

// Javascript
// when page is loaded...
jQuery(document).ready(function) {
  // assign this handler to the buttonDiv element...
  jQuery("#buttonDiv").click(function() {
    // to alert "hello"
    alert("hello");
  });
}


// HTML 5
<div id="buttonDiv">Click me </div>

これは期待どおりに機能します-素晴らしいです！

しかしdiv#buttonDiv、ドキュメントがロードされ、後でAjaxを使用してDOMに追加されたときに、が存在していなかったとします。この場合、click()イベントハンドラーは追加されず、アラートは呼び出されません。

インラインJavaScriptを使用せずに、この要素にイベントハンドラーを追加するにはどうすればよいですか？

どんな提案も歓迎します。

4

1 に答える 1

1

これが.live()目的です:)このように：

jQuery(function) {
  jQuery("#buttonDiv").live("click", function() {
    alert("hello");
  });
});

.live()要素が実際に追加されたときにイベントハンドラーを追加しませんが、document実行時にイベントハンドラーを追加し、clickバブルアップするイベントをリッスンします。古い要素と新しい要素は同じようにバブルするため、いつ追加されたかは関係ありませんclick。セレクターが一致する限り、ハンドラーは引き続き機能します。

ボタンが特定のコンテナー内にあることがわかっている場合に使用できる同様の.delegate()（内部で使用する）ものもあります。たとえば、AJAXを介してコンテナーを再ロードすると、次のようになります。.live()#content

jQuery(function) {
  jQuery("#content").delegate("#buttonDiv", "click", function() {
    alert("hello");
  });
});

これにより、バブリングイベントのリスナーが追加され、#contentバブルをキャッチする前にいくつかのバブルを保存するだけでdocument、実際にはどちらも問題なく、パフォーマンスの違いを判断できません。大量のイベントハンドラーを実行します。.live()

于 2010-09-09T10:25:53.877 に答える