jQueryで追加した要素のクリックイベントを動かす方法

Question

お世話になります。

jQueryを使用したJavaScriptで個人用のツールを作成しているのですが、
ページ表示の処理の中で追加した要素の、クリックイベントを発火できず困っています。

$( function() {
    $(document).ready( function() {    // ①
      // ここである要素(class="hoge")をHTMLへ追加する。
      // ちなみに今回追加しているのは<img>要素です。
    });

    $('.hoge').on('click', function(){  // ②
      // この処理が動かず困っています。
      alert('Hello');
    });
});

もともとhtml上に存在した、class=hogeの要素をクリックした時は、②のイベントが動くことから、
JavaScriptの読み込みのタイミングなどが関係しているのかもと想像はしていますが、
どうにか①で追加した要素から②の処理を動かす方法はないでしょうか？

※動かない理由も併せて回答いただけると非常に助かります...

Answer 1

  $( function() {
      $(document).ready( function() {    // ①
          $('body').append("<img class='hoge' src='img_logo.png'/>");
      });

      $(document).on('click','.hoge', function(){  // ②
        // この処理が動かず困っています。
        alert('Hello');
      });
  });

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

を修正しております。

なんとなくこれで動きますよ

Answer 2

$( 'body' ).on( 'click', '.hoge', function() {
  alert('Hello');
} );

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

Comments

[byth_net]

ありがとうございます。
無事イベント発火することができました・・・。
理由がよくわかりませんが、非常にたすかりました。

[NS-DOS]

>理由がよくわかりませんが
on()を作用させるjQueryオブジェクトは、「既に存在している」必要があるからです。
あとから追加した要素である'.hoge'にon()は作用させられません。引数として渡して登録するのはそのためです。
お二方の回答のように'document'や'body'なら確実ですが、「.hogeの祖先要素で、最初から存在している要素」ならon()メソッドで操作できます。
横から蛇足、失礼しました。

[kei344]

To: NS-DOSさん
補足ありがとうございます！

To: byth_netさん
回答をした後にリンクを足したのですが、その「デリゲートを利用したイベント設定」の項目で解説されているので、一度見てみてください。
https://app.codegrid.net/entry/practical-jquery-1#toc-2