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()で第二引数を指定しないと動かなかった。
リファレンス
関連記事
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...