勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

jQueryで.html()等を使って追加した要素に対してイベントを設定したかった。今までは関数を作ってonclickとかでその関数を動かしていたけど、何とかしてjQueryで対応したかった。以下に方法をメモ。

 

ソース

<body>

<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>
</body>
</html>

 

on()を使ってセレクタを指定する

on()の第二引数にセレクタを指定する事で後から追加された要素に対してもイベントを設定できるみたい。click()やon()で第二引数を指定しないと動かなかった。

 

リファレンス

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

 - jQuery

  関連記事

jQueryで高速化

高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...