1

違いは何ですか:

$("a.myclass").on("click", callback);

と

$(document).on("click", "a.myclass", callback);?
4

2 に答える 2

5

2 番目の方法はa.myclass、 が DOM に動的に追加される場合に使用されます (たとえば、ドキュメントがロードされたときに存在しない場合)。document理想的には、最高のパフォーマンスを得るよりも近い DOM 内の要素を使用する必要があります*。どちらも のクリック イベントにバインドしますa.myclass。

2番目の形式に関するjQueryドキュメントによると：.on()

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

* ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントの委任イベントに document または document.body を過度に使用しないでください。

于 2013-03-05T16:42:56.967 に答える
2 
$("a.myclass").on("click", callback);

このコードでは、jQuery は一致するすべての要素を取得しa.myclass、イベント ハンドラーをそれらにアタッチします。

$(document).on("click", "a.myclass", callback);

ここで、jQuery はを取得しdocument、イベント ハンドラーをアタッチして、イベント ハンドラーにバブルアップする (元々は に一致する要素でトリガーされたa.myclass) クリック イベントを追加します。

をクリックするa.myclassと、最初のコードが 2 番目のコードの前に実行されます。これは、コードが含まれているドキュメントにまだ「バブルアップ」していないためです。

2 番目の利点は、j08691が言うように、上記のスクリプトの実行後にページに追加された (またはその説明に一致するようになった) 説明に一致する要素が、引き続きコールバックをトリガーすることです。

欠点は、ある時点でコードを書く場合

$('a').on('click', function(e){
    e.stopPropagation();
})

また

$('a').on('click', function(e){
    return false;
})

…その場合、2 番目のメソッドは起動しません。ただし、これは特殊なケースであり、おそらく心配する必要はありません。

于 2013-03-05T16:51:15.943 に答える