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()で第二引数を指定しないと動かなかった。
リファレンス
関連記事
-
-
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で再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
- PREV
- mysqlでrootのパスワードが分からない場合
- NEXT
- RLoginで秘密鍵の使用