$（document）.on（ 'click'、 '＃id'、function（）{}）vs $（ '＃id'）。on（ 'click'、function（）{}）[closed]

私は違いは何であるかを見つけようとしていました

$(document).on('click', '#id', function(){});

そして

$('#id').on('click', function(){});

2つの間に違いがあるかどうか、もしそうなら、その違いが何であるかについての情報を見つけることができませんでした。

何か違いがあれば説明してもらえますか？

最初の例は、イベントの委任を示しています。イベントハンドラーは、DOMツリーの上位の要素（この場合はdocument）にバインドされ、セレクターに一致する要素で発生したイベントがその要素に到達したときに実行されます。

これが可能なのは、ほとんどのDOMイベントが起点からツリーをバブルアップするためです。#id要素をクリックすると、クリックイベントが生成され、すべての祖先要素を介してバブルアップします（補足：イベントがツリーを下ってツリーに到達すると、実際には「キャプチャフェーズ」と呼ばれるこの前のフェーズがあります。ターゲット）。これらの祖先のいずれかでイベントをキャプチャできます。

2番目の例では、イベントハンドラーを要素に直接バインドします。イベントは引き続きバブルしますが（ハンドラーでそれを防止しない限り）、ハンドラーはターゲットにバインドされているため、このプロセスの効果は表示されません。

イベントハンドラーを委任することにより、バインド時にDOMに存在しなかった要素に対して確実に実行されるようにすることができます。あなたの場合は#id要素はあなたの第二の例の後に作成された、あなたのハンドラは実行しないでしょう。実行時に確実にDOMにあることがわかっている要素にバインドすることで、ハンドラーが実際に何かにアタッチされ、後で必要に応じて実行できるようになります。

次のコードを検討してください

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

さて、ここに違いがあります

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

では、myTaskを再度追加するとどうなるでしょうか。

$('#myTask').append('<li>Answer this question on SO</li>');

このmyTaskアイテムをクリックしても、イベントハンドラーがバインドされていないため、リストから削除されません。代わりにを使用した.on場合、新しいアイテムは私たちの側で特別な努力をしなくても機能します。.onバージョンは次のようになります。

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

概要：

差.on()と.click()それがあろう.click()と関連付けられたDOM要素ときに動作しない可能性があり.click()ながらイベントは後の時点で動的に追加されている.on()関連付けられたDOM要素の状況で使用することができる.on()呼が後の時点で、動的に生成されてもよいです。