jQueryの.on

Question

なぜだろう、この作品：

$(document).on("dblclick", "#areaA tr:has(td)", function(e) { 
    //code here 
}); 

と、これはまさに

$("#areaA tr:has(td)").on('dblclick', function(e) { 
    //Code here 
}); 

私はjqueryのドキュメントページ上の例で、次のよいませんが、私のダブルクリックはありません火事ではない。私はそれを最初のやり方でやっていますが、それはうまくいきますが、イベントを二度起こすようです。

これは、剣道のUIグリッドとの関連です。

実際には、これら2つのコードの違いはありますか？

Answer 1

主な違いは、クリックするたびに最初の条件がチェックされる点です。したがって、idがareaAまたはtrまたはtdの要素が動的に追加された場合、最初の要素だけが動作します。

Answer 2

実際には、これら2つのコードの違いはありますか？

はい。最初のコードは、子孫要素によってトリガーされた文書をバブリングするイベントによってハンドラーが起動される委任イベント処理の形式です。 2番目は、指定されたセレクタのjQueryによって返された実際の要素にイベントハンドラをバインドしています（ の場合 の場合  #areaA tr:has(td)）。コードの

まず作品：彼らはに追加され子孫要素からイベントを処理できるという利点がある

委任イベント

ここでjQueryのドキュメントからの関連情報です後で 時に文書化してください。デリゲートされたイベントハンドラが添付されているときに、 に存在することが保証されている要素を選択すると、 ハンドラを頻繁にアタッチして削除する必要をなくすために、委任された イベントを使用できます。

コードの第2部分：

イベントハンドラのみ、現在選択された要素に結合されています。彼らはあなたのコードが.onする呼び出しを行う時に存在している必要があります（）

Answer 3

あなたが結合事象のルールに従う静的親、その後、動的な子を、選択されているので、あなたが作品を記述する第一の方法.onメソッドを使用して動的に作成された要素。

.onメソッドの構文は次のとおりです。これについてはすでに勉強しているようです。私は.onで動的な要素にバインドしたい場合

$(selector).on(event,childSelector,data,function,map) 

だから、私は、ドル記号に.onメソッドの内部で、まず静的な親要素を選択する必要があり、動的子要素を選択します。あなたはそれが私が#areaAは静的な要素ではないと仮定しています働いていなかったので言及

$("body").on('dblclick', '#areaA tr:has(td)', function(e) { 
    //Code here 
}); 

：あなたのケースでは、正しい使用の場合は次のように動作します。より関連性の高い静的要素のためにbodyを置き換えることができます。