浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【jQuery】動的に追加した要素へのclickイベントが発火しない時の対処法

質問を受けて調べたので備忘録としてまとめ。
jQuery のクリックイベントが発火しない時の対処法についてです。

今回参考にさせていただいた記事はこちらから。

jQueryのclickイベントが動作しない?Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。 | WEMO
https://wemo.tech/386

 

タイトルにもある通り、今回は Ajax などを使って動的に追加した要素に対してクリックイベントを発火させたい場合です。
動的に要素を追加した場合、JavaScript を読み込んだ時点ではまだその対象の要素が読み込まれていないため、下記の方法ではクリックイベントを発火させることができません。

$(function(){
    $('要素').click(function(){
        // 実行したい処理を記述
    });
});

そのため、下記のように document を対象にイベント発火の処理を指定すればOKです。

$(function()){
    $(document).on('click', '要素', function(){
        // 実行したい処理を記述
  });
});

上記のコードの書き方に修正したところ、問題なく動作することを確認できました!

 

以上、jQuery で動的に追加した要素へのクリックイベントが発火しない時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (1)