[解決済み] $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){}) [閉店].

質問

とは何が違うのかを調べようとしていました。

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

と

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

この2つの間に何か違いがあるのか、あるとすればその違いは何なのか、といった情報を見つけることができませんでした。

どなたか、違いがあるのかどうか、説明していただけませんか？

どのように解決するのですか？

最初の例では イベントデレゲーション . イベントハンドラは、DOM ツリーの上位にある要素 (この例では document ) に束縛され、セレクタにマッチする要素から発生したイベントがその要素に到達したときに実行されます。

これは、ほとんどの DOM イベント バブル を起点としてツリーを上昇するためです。もしあなたが #id 要素をクリックすると、クリックイベントが生成され、すべての祖先要素 ( 注: 実際には、この前に「キャプチャフェーズ」と呼ばれるフェーズがあり、イベントがツリーを下ってターゲット ). これらの祖先のいずれでもイベントを捕捉することができます。

2 番目の例では、イベントハンドラを要素に直接結びつけています。イベントはまだバブルしますが (ハンドラでそれを阻止しない限り)、ハンドラがターゲットにバインドされているため、この処理の効果は見えません。

イベントハンドラを委譲することで、バインド時に DOM に存在しなかった要素に対して確実に実行されるようにすることができます。もし、あなたの #id 要素が 2 番目の例の後に作成された場合、ハンドラは決して実行されません。実行時に DOM 内に確実に存在する要素にバインドすることで、ハンドラが実際に何かにアタッチされ、後で適切に実行されることを保証します。