jQuery on（）セレクタ

Question

jQuery on()メソッドのselectorの目的は何ですか？どのような状況では

は、

$("#fish").find(".button").on("click", function() { 
    // something 
}); 

$("#fish").on("click", ".button", function() { 
    // something 
}); 

たとえば、より良いですか？

私はjQuery documentionに見て、見つけた：

セレクタを省略するかnullであるされている場合は、イベントハンドラは、直接または直接バウンドと呼ばれています。このハンドラは、選択された要素でイベントが発生するたびに呼び出されます。要素に直接発生するか、子孫（内部）要素から発生するかに関係なく発生します。

セレクタが提供される場合、イベントハンドラは委任されたと呼ばれます。バインドされた要素でイベントが直接発生したときにハンドラが呼び出されるのではなく、セレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。 jQueryはイベントをイベントターゲットからハンドラがアタッチされている要素（つまり最も内側の要素から最も外側の要素）までバブリングし、セレクタに一致するそのパスに沿った任意の要素のハンドラを実行します。私が言ってで修正

アムは違いが私の最初の例では、イベントが#fishにバインドされていることであるが、2番目の例ではイベントがバインドされているのに対してのみ、.buttonsからバブルアップイベントをリッスンしていることそれぞれ.buttons？もしそうなら、これの意味は何ですか？ ：S

イベントが#fishにバインドされている場合、.buttonをクリックすると、クリックされた.buttonを知ることができますか？これは.buttonよりむしろ#fishを参照します。正しい？

Answer 1

例1は、子孫が#fishである限り、動的に作成されるボタンのイベントをバインドします。バインド後に作成されたボタンにはクリックハンドラが呼び出されます。祖先要素を選択しない場合は、$(document)にバインドすることもできます。

例2は、バインディング時にDOMにあるボタンにのみバインドされます。ダイナミックに作成された要素は、ハンドラを受信しません。

両方の例では、thisと$(this)は、#fishではなく、クリックされたボタンを参照します。

このjsFiddleをデモ用にご覧ください。コンソールでthisは#fishではないボタンを参照していることがわかります。

$('#fish').on('click', '.button', function(){ 
    console.log(this.id); 
}); 

Answer 2

はい、正しいです。セレクタでonメソッドを呼び出すと、委任されたイベントが作成されます。

$("#fish").on("click", ".button", function() { 

は同じん：イベント

$("#fish").delegate(".button", "click", function() { 

は#fish要素にバインドされているが、それは唯一の.button要素のクリックのイベントハンドラを呼び出します。つまり、要素をバインドするときに.button要素が存在する必要はなく、#fish要素のみが存在する必要があります。