jQueryで後から追加された要素にイベントを設定
2024/02/22
jQueryで.html()等を使って追加した要素に対してイベントを設定したかった。今までは関数を作ってonclickとかでその関数を動かしていたけど、何とかしてjQueryで対応したかった。以下に方法をメモ。
ソース
<a href="javascript:void(0)" id="link">link</a> <div id="area"></div> <script> $('#link').click(function(){ $('#area').html('<a href="javascript:void(0)" id="link2">link2</a>'); }); /* これは動かない $('#link2').click(function(){ alert(0); }); */ /* これも動かない $('#link2').on('click', function(){ alert(0); }); */ /* これなら動く */ $('#area').on('click', '#link2', function(){ alert(0); }); </script>
on()を使ってセレクタを指定する
on()の第二引数にセレクタを指定する事で後から追加された要素に対してもイベントを設定できるみたい。click()やon()で第二引数を指定しないと動かなかった。
リファレンス
関連記事
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
クロスドメインな状況でiframeがIEのみ挙動がおかしくなる場合
iframeで別のドメインのサイトを表示させた場合に、firefoxやchrom ...
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
要素の点滅
やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...