5

ご存知のように、jQuery 1.7 以降: 

$('someSelector').live('click', fn());

本質的に次のようになりました。 

$(document).on('click', 'someSelector', fn());

すべてのライブ イベントは、セレクターの要素に直接バインドされるのではなく、ドキュメントにバインドされるデリゲートです。

これは'someSelector'、将来一致する要素がDOMに存在しないため、イベントハンドラーを（直接またはデリゲートバインディングを介して）バインドできないためだと思います。

すべての要素が動的に読み込まれるわけではないにしても、大部分が動的に読み込まれる単一ページ アプリケーションの場合、すべてをドキュメントにバインドすることでパフォーマンスの問題を処理する最善の方法についてのガイドラインは公開されていますか?

たとえば、新しいコンテンツがロードされたときにイベント ハンドラーを登録/再登録する最良の方法とajax()、怠惰な.live()考え方で書かれたコードを更新する方法をカバーしていますか?

4

1 に答える 1

3

「公表されたガイドライン」があるかどうかはわかりません。

このアプローチにはメリットがあると思います。

  • ドキュメントから削除されない最も近い論理共通祖先を見つけます。

    例:ドラッグ可能なテーブル行の動作の場合、これは親テーブル (または tbody) になります。

  • そこにイベントをバインドします。これにより、コンテキストチェックを必要とせずに、同じものの個別のインスタンスを異なる動作にすることができます。

    例:テーブルの 1 つで行のドラッグが一時的に無効になっている場合、イベントを処理するテーブルは当然のように認識します。documentしません 。

  • によって処理されるイベントの数をdocument最小限に抑えるため、イベントが発生したときに「これは本当に必要か」というチェックはあまり行われません。

    例:document現在、ドラッグ可能な行を含むテーブルがない場合、そのレベルでイベント ハンドラーを起動する必要さえありません (それtable.draggable trが実際にはイベントのソースではないことを確認し、すぐに破棄するためだけです)。

  • 共通の祖先が頻繁に削除される場合は、作成時にイベント ハンドラーを再バインドするか、階層のいくつかのレベルでバインドするかを決定できます。

コンテナーの作成時にコンテナー イベントを再バインドしますが、それは個人的な好みだと思います。結局のところ、再バインドは簡単です。

// once, beforehand
var draggableTableRowBehavior = {
  dragstart: function () { /* ... */ },
  dragstop: function () { /* ... */ }
  /* ... */
};

//in Ajax success:
$table.on(draggableTableRowBehavior, 'tr');
于 2012-05-01T17:36:57.100 に答える