Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
194
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@negi

動的に生成した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\">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
194
Help us understand the problem. What are the problem?