🐝

【jQuery】$(document).on('click', '.hoge'と $('.hoge',).on('click'の違い

2023/08/16に公開

①と②のコードでは何が違うでしょうか。
どちらもよく見かけるのですが、いまいち違いがわかってなかったので、調べてみました。

$(document).on('click', '.hoge', function () {}
$('.hoge',).on('click',  function () {}

①はクリックイベントを document オブジェクトに対して登録しています。
document はページ全体を表しているため、.hoge クラスを持つ要素がレンダリング後に動的に追加されても、イベントリスナーは引き続き有効になるようです。

②は.hoge クラスを持つ要素に対して直接クリックイベントを登録しています。要素を特定の範囲に限定してイベントを処理するため、要素が後で追加された場合には新たな要素にはイベントリスナーが適用されないようです。

要素が既に存在している場合、どちらのコードも同じように機能しますが、要素が動的に追加される場合は、最初のコードがより柔軟ってことですかね。

Discussion