困ったこと

・クリックでイベント発火させたい
・初回は動いたが追加された要素のクリックイベントが発火されない

問題のコード


$('botton').click(function(){
  /* 処理内容 */
};

ボタンを押すことでイベント発火させ、ボタンを追加する処理をしました。

その次に上のようなスクリプトを用いて、
追加したボタンをクリック発火させよとしても発火しなくなりました。

調べてみるとイベントハンドラが登録されていないからが原因でした。

HTMLを読み込み初回に表示する際にイベントハンドラが登録されるので、
それ以降に動的に追加された要素にはイベントハンドラが登録されず、
クリックしても動かないというものです。

$(document).on('click', 'セレクタ', function(){
  /* イベント発火時の処理 */
});

$(document).on のようにウェブページ全体に対してイベントハンドラを登録をすることで解決します。

記述を変更することで２回目もイベント発火しました！

このような方法で動的に追加したセレクタでクリック以外のイベントも発火できます。