DOM生成した要素に対してクリックなどのイベントを実行する方法

DOM生成した要素にイベントが実行できない

$('div.hoge').append('<ul id="hoge-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
$('div.hoge ul#hoge-01 li a').click(function(){
$('div.hoge ul#hoge-01').after('<ul id="hoge-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
  return false;
});
$('div.hoge ul#hoge-02 li a').click(function(){
  alert('クリックしてもアラート表示されない');
  return false;
});

• ※クリックしてDOM生成された、2つ目のリンクのclickイベントは反応しない

DOM生成した要素にイベントが実行できる

$('div.moge').append('<ul id="moge-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
$('div.moge ul#moge-01 li a').click(function(){
  $('div.moge ul#moge-01').after('<ul id="moge-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
  return false;
});
$(document).on("click","div.moge ul#moge-02 li a",function(){
  alert('クリックするとアラート表示される');
  return false;
});

• ※.on()メソッドの第一引数にイベント名、第二引数にセレクタを指定
• ※$(document)により親要素に対するイベントハンドラを指定

DOM生成した要素にイベントが実行できる（第二引数を省略）

$('div.fuga').append('<ul id="fuga-01" class="list-link-01"><li><a href="#">jsでページ読み込み時にDOM生成されたリンク</a></li></ul>');
$('div.fuga ul#fuga-01 li a').click(function(){
  $('div.fuga ul#fuga-01').after('<ul id="fuga-02" class="list-link-01"><li><a href="#">クリックでDOM生成されたリンク</a></li></ul>');
  $('div.fuga ul#fuga-02 li a').on("click",function(){
    alert('クリックするとアラート表示される');
    return false;
  });
  return false;
});

• ※第二引数を省略してセレクタを指定
• ※最初のclick(function～内で要素追加後に2つ目のclickは.onで記述

デモの解説記事に戻る