Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

参考:
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\">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\">2つ目の要素</div>");
});

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした