jQueryで動的に追加した要素でもイベントを発火させる方法!

jQueryで動的に追加した要素でもイベントを発火させる方法についてご紹介します!onメソッドをつかった場合と、もしonメソッドが使えない場合も解説します。サンプルコード付きなので、みなさんもぜひ試してみてくださいね!

コンテンツ [表示]

  1. 1jQueryで動的に追加した要素でイベントが発火しない
  2. 2jQueryで動的に追加した要素でイベントが発火しないよくある例
  3. 3jQueryで動的に追加した要素でもイベントを発火させる方法
  4. 3.1onメソッドを使ったjQuery バージョン1.7以降で動作するサンプルコード
  5. 3.2liveメソッドを使ったjQuery バージョン1.7以前で動作するサンプルコード
  6. 4まとめ

jQueryで動的に追加した要素でイベントが発火しない

jQueryで、ボタンをクリックした時にコンテンツを表示するようなWEBサイトってよくありますよね?
それだけなら.click()メソッドで、イベントを追加すれば簡単に実装できますよね。

そこで、動的要素に対して、さらにイベントを追加するという方法をご紹介します。
動的とは、jQueryやJavasciprtで後からHTML要素が追加される状態のことを指します。

jQueryのバージョンによって方法が変わってくるので、その部分についてもぜひ確認してみてください。

Photo byPexels

jQueryで動的に追加した要素でイベントが発火しないよくある例

よくあるイベントが効かない、反応しないサンプルコードから順に説明していきたいと思います。

まずは下のサンプルコードを見てみましょう!

【Javasciprt】追加要素に対応していないサンプルコード

// clickメソッドをつかった場合
$(".btn").click(function () {
    // 処理
});

// onメソッドをつかった場合
$(".btn").on("click", function () {
    // 処理
});

.btnがクリックされたときにイベントを追加するjQueryのコードです。ちなみにこの2つのコードの挙動は同じです。

ですが、このままでは動的な追加要素に対してはイベントが発生しません。

なぜならば、追加されたあとの.btnについてはイベントの指示がなされていないからなのです。

そもそもjQueryでは、動的要素と、その逆の静的要素に対してのコードの書き方が違うんです。

jQueryで動的に追加した要素でもイベントを発火させる方法

では、追加要素でもイベントを発火させる方法をご紹介します。

jQueryのバージョンの問題で、バージョン1.7以前と以降とではコードの書き方が違いますので注意してください。

onメソッドを使ったjQuery バージョン1.7以降で動作するサンプルコード

.on()メソッドを使ったjQuery バージョン1.7以降で動作するサンプルコードです。

【Javasciprt】追加要素に対応しているサンプルコード .onメソッド

$(document).on("click", ".btn", function () {
    // 処理
});

先ほどの例でも.on()メソッドを使っていました。.on()メソッドの書き方は2種類あり、こちらが静的、動的要素に対してイベントを追加できる書き方です。

ちなみに$()内のdocumentとは、documentオブジェクトと呼ばれ、ブラウザ上でWEBページが持っているデータを指しています。

よくこのイベント発火の話題で、documentを指定していますが、必ずしもdocumentである必要はありません。

実際に動作するプレビュー付きのサンプルコードもご確認ください。

上のサンプルコードでは、「ボタンを追加するボタン」をクリックすると追加要素である新しいボタンが動的に生成されます。

最初からある静的な、「追加前ボタン」と、動的に後から生成された「追加後ボタン」では両方にアラートが表示されるイベントを追加しています。

liveメソッドを使ったjQuery バージョン1.7以前で動作するサンプルコード

.live()メソッドを使ったjQuery バージョン1.7以前で動作するサンプルコードです。
バージョン1.7以前では、.on()メソッドがないのでこちらを使いましょう!

【Javasciprt】追加要素に対応しているサンプルコード .live()メソッド

$(".btn").live("click", function () {
    // 処理
});

.live()メソッドは、動的な追加要素にもイベントを追加することができます。

実際に動作するプレビュー付きのサンプルコードもご確認ください。

まとめ

今回は、jQueryで動的に追加した要素でもイベントを発火させる方法についてご紹介しました。

昨今では、これまでjQueryでおこなっていたような処理は、jQueryを使わなくても簡単に出来るようになりました。
それでも、jQueryを使って動いているWEBサイトやWEBアプリケーションはまだまだたくさんありますので知っておいて損はありません。

特にこの内容はよくハマってしまう落とし穴なので、ここできちん対処法を理解しておきましょう!

あわせて読みたい
jQueryでclickイベントが効かない場合の対処法!のイメージ
jQueryでclickイベントが効かない場合の対処法!
jQueryでclickイベントが効かない場合というのは、主に.append()などで後から追加したDOM要素に.click()を指定した場合です。ここではjQueryでclickイベントが効かない場合の対処法についてサンプルコード付きで解説します。
GeekHive採用サイト

関連記事