勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで後から追加された要素にイベントを設定

   2024/02/22  jQuery

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()で第二引数を指定しないと動かなかった。

 

リファレンス

http://js.studio-kingdom.com/jquery/events/on

 - jQuery

  関連記事

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...