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()で第二引数を指定しないと動かなかった。
リファレンス
関連記事
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)
タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...