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()で第二引数を指定しないと動かなかった。
リファレンス
関連記事
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...
アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法
アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを ...
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...
tableのフィルター機能
jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...
他サイトのRSS情報を画像付きで表示させる
WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...