動的に生成したDOM要素に対してjQueryでイベントを設定する場合

参考：
jQueryで動的に生成される要素に対するイベントの設定方法 | klog
.on() | jQuery 1.9 日本語リファレンス | js STUDIO

よく忘れるので備忘録。

jQueryで動的にDOMを生成すると、その要素に対してイベントを生成するには通常の方法ではイベントが効かなくなる。

例：（一部参考サイトより抜粋）

<div id="1">1つめの要素</div>

<script type="text/javascript">
  $("#1").click(function(){
    $("#1").after("<div id=\"2\">２つ目の要素追加</div>");
  });

  $("#1").click(function(){
    alert("1つ目の要素クリック");
  });

  $("#2").click(function(){
    alert("2つ目の要素クリック");
  });
</script>

これだと1つ目の要素をクリックしたときには、$("#1").click(function(){};が実行されますが、後から追加された2つ目の要素のclickイベントは反応しません。

$("#2").click(function(){};の部分を以下の様に変更します。

$("#1").click(function(){
  $("#1").after("<div id=\"2\">２つ目の要素</div>");
});

$("#1").click(function(){
    alert("1つ目の要素クリック");
});

$(document).on("click", "#2", function(){
    alert("2つ目の要素クリック");
});

.on()メソッドの第一引数にイベント名、第二引数にセレクタを記述します。
上記の$(document)にセレクタを指定して、第二引数を省略することも可能ですが、動作しないこともある（原因は不明、タイミングの問題？）ので、どちらでも書けることを念頭に入れておこうと思います。