jQuery $(document).on と $(selector).on の違い

2021年1月3日

$(document).on は動的に追加されたHTMLに対してもイベントを処理できます。

一方で、$(selector).on は、その時点のHTMLに対してのみ作用します。

以下が例です。

まず、$(selector).on の場合です。

const hoge = () => console.log("hoge");

$(function(){
  $("#my-btn").on("click", hoge);
  $("body").append("<button id='my-btn'>button2</button>");
});

#my-btn に対してクリックイベントを登録した後に、ボタンを追加しています。

イベント登録のタイミングでは、まだ #my-btn は存在しないため、ボタンを押してもコンソールには何も出力されません。

次に $(document).on の場合です。

const hoge = () => console.log("hoge");

$(function(){
  $(document).on("click", "#my-btn", hoge);
  $("body").append("<button id='my-btn'>button2</button>");
});

$(document).on の場合は、動的に追加されたHTML(この場合 #my-btn)にも作用するため、ボタンを押すとコンソールに「hoge」と出力されます。