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

Javascript(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!");
});

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

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください