jQueryで追加した要素にクリックイベントを設定する方法

jQueryで後から追加した要素は、普通にクリックイベントを設定しても動かない。
そんな時の解決方法のご紹介です。

後から追加した要素にクリックイベントを発火させる方法

例として下のHTMLをjQueryで追加します。

jQueryで追加したHTML

<div class="demo"></div>

この追加したHTMLにクリックイベントを発生させる方法はこちらです。

jQuery

$(document).on("click", ".demo", function() {
  // 「.demo」が押された時の処理
});

jQueryの説明です。
最初の「$(document)」は、ページの全要素を指定している。
全要素にクリックイベントを指定して、「全要素」の中の「.demo」が押されたらをさらに指定すると、後から追加した要素にもクリックイベントを発火できる。
この指定方法だと、HTMLが数千行も書いてあるページだと処理が若干遅くなります。
処理を早くするには「$(document)」ではなく、もっと範囲の小さい親要素または先祖要素を指定する。

処理の早い追加した要素にクリックイベントを発火させる方法

下のHTML「.demo」にjQueryで「p」タグを追加しています。

jQueryで「.demo p」を追加したHTML

<div class="demo">
  <p></p>
</div>

jQuery

$(".demo").on("click", "p", function() {
  // 「.demo p」が押された時の処理
});