jQueryで動的に要素を追加したら自動的に何かをさせる、という場合に便利なtipsです。本日は「jQueryで動的追加したDOM要素の存在を検知する」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「jQueryで動的追加したDOM要素の存在を検知する」についてです。
本記事を書くにあたって以下サイトを参考にさせていただきました。貴重な情報の提供を感謝いたします。
jQueryの$(document).readyをセレクタで使いたい - Mach3.laBlog
jQueryで動的に要素を追加することは日常茶飯事ですが、たまに追加要素の存在を検知したら何かさせたい、ということもあります。大抵は追加するイベントと同時に何かをさせることがほとんででしょうが、たまにあるのです。
サンプル
構文が単純なので上記まっは様の記事とほとんど同じサンプルになり恐縮ですが、idがhogeという要素が追加されたらアラートを表示させます。
1 2 3 |
$("#hoge").onReady(function(e){ alert("要素を検知しました。"); }); |
以下はjQuery構文の書き始めとして以下はよく使いますが、これのdocumentをセレクタに置き換えるだけで動的追加要素の検知が出来るというのは、少し新鮮ですね。
1 2 3 |
$(document).ready(function(){ //処理 }); |
なお、動作確認は、
jQuery3.1.1
にて行いました。