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

Question

バージョン1.7以降liveは推奨されていません。 onを使用して、次の例を書き換える方法

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

：onを使用して

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

例次

は新しいon方法で両立させるのは簡単ですか！

$('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function() { 
    // code... 
}); 

Answer 1

だけリスナーとして文書を結合されたコメント

$(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... 
}); 

Answer 2

あなたはDOMオブジェクトのイベントを聞くことができるように.on()を使用しようとしている場合最初に.on()コールを作成した後に作成される可能性がある場合、最も効率的な方法は、移動しない既存の親オブジェクトを見つけて、イベントリスナーを今すぐバインドすることです。

.live()ドキュメントオブジェクト（マスターの親）にすべてのリスナーを配置し、リスナーが多い場合は非常に効率が悪くなります。

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

しかし、これを行うより効率的な方法は、必要に応じてこれを分割することです。動的な必要がない要素については、その要素に直接バインドします。

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

そして、あなたには、いくつかのダイナミックを必要とする要素について：＃ヘッダーと＃SB-秒が行く/来ないと動的挙動を必要としない場合たとえば、あなたはちょうどこのようにそれを直接見つけることができます動作は、適切な共通の親を選択し、イベントのためのキャッチポイントとして共通の親とあなたがイベントを発生したいサブ要素のためのフィルタとしてセレクタを使用して、このようにその上にフック用：

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

Answer 3

live（）のドキュメントを見たい場合は、on（）のスイッチが文書化されています：http://api.jquery.com/live/