web-dev-qa-db-ja.com

複数のセレクターのjQuery on（）メソッド

バージョン1.7以降、liveは非推奨です。

次の例は、新しいonメソッドと簡単に互換性を持たせることができます。

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

onを使用：

$('nav, #sb-nav, #help').on('click', 'li', function () {
    // code...
});

on？を使用して次の例を書き換える方法

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
     // code...
 });
javascriptjqueryjquery-1.7
46
Wojciech Bednarski
_$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });
_

.live()は、ドキュメントをリスナーとしてバインドするだけです。

私の2セントは、ほとんど常にdocumentよりも優れたリスナーを見つけることができるということです。最低限、ほぼすべてのページでメインコンテンツラッパーが使用されます。これにより、ヘッダー、フッター、および場合によってはリスナーとしてのサイドバーのノードが削除されます。

_.on_を委任関数として使用する最良の方法は、破棄されることやイベントがバインドされないことが予想される最も近い共通の祖先を識別することです。たとえば、ajaxリクエストによって更新および変更されるフォームがある場合、リスナーはフォームノード自体（フォームのコンテンツのみが更新される場合）またはフォームを囲むコンテナ要素（通常はdiv）になります。そのようなdivが存在しない場合は、いつでも追加できます。または、次の祖先にツリーを移動することもできます。

[追加して編集：]

提供されている特定のサンプルコードでは、_#header_と_#sb-sec_の両方を含む優れたリスナーがあるかどうかを言うのは困難です。しかし、これらのものがid "mainContainer"を持つ祖先を共有していると想像すると、より効率的なコードは単にリスナーを入れ替えます。

_$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
   // code...
});
_
78
Greg Pettit

.on()を使用して、最初の.on()呼び出しを行った後に作成されるDOMオブジェクトのイベントをリッスンできるようにする場合、最も効率的な方法行き来しない既存の親オブジェクトを見つけることであり、イベントリスナーを今すぐバインドできます。

.live()は、すべてのリスナーをドキュメントオブジェクト（マスターの親）に配置します。リスナーが多数いると、かなり非効率になる可能性があります。

.on()を使用すると、親オブジェクトが最も効率的になるものを指定できます。したがって、これらすべてのイベントハンドラーを1つのステートメントに配置し、これらの '#header .fixed-feedback-bn、＃sb-sec .feedback-bn'に共通の親がない場合は、指定する必要がありますグレッグのような親が書いた文書。

しかし、これを行うより効率的な方法は、必要に応じてこれを分解することです。動的に必要のない要素については、その要素に直接バインドするだけです。たとえば、＃headerと＃sb-secが出入りせず、動的な動作が必要ない場合は、次のように直接検索できます。

$('#header, #sb-sec').on('click', function() {
    // code here
});

また、動的な動作が必要な要素については、適切な共通の親を選択し、イベントのキャッチポイントとして共通の親を使用し、イベントを発生させるサブ要素のフィルターとしてセレクタを使用して、このようなものにフックしますために：

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
    // code here
});
5
jfriend00