LoginSignup
207
195

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-02-11

参考:
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)にセレクタを指定して、第二引数を省略することも可能ですが、動作しないこともある(原因は不明、タイミングの問題?)ので、どちらでも書けることを念頭に入れておこうと思います。

207
195
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
207
195