【jQuery】動的に生成されたタグに対するイベント追加

Javascriptで書いたイベント処理が動作しないケースのひとつ。
動的に生成したタグに対してのイベントの場合。

イベントが動作しないケース

以下にサンプルコードを記載する。

HTML
：
<button class="plus">増やす</button>
：

Javascript(jQuery)
/* 動的にタグを追加する */
$(".plus").click(function(){
  $(this).after('<p class="test">Show TEST!</p>');
});

/* アラート表示 */
$(".test").click(function(){
  alert("TEST!");
});

このコードの場合、以下のような動作をするように見える。

1. 「増やす」というボタンをクリック
2. 下に「Show TEST!」というテキストが表示される
3. テキストをクリックすると「TEST!」というアラートが表示される

だが実際は、3番目のテキストクリックは動作しない。
Javascriptで動的に生成されたタグに対するイベントは、生成後にアドしないと動作しないためである。

イベントを動作させるには

こういった場合、以下の書き方をすると、動的に生成されたタグに対してもイベントが適応される。

Javascript
/* アラート表示 */
$(document).on("click", ".test", function(){
    alert("TEST!");
});

イベントの書き方を変えただけだが、これなら動的に生成されたテキスト部分のクリックイベントが動作する。