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

2017/10/26

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

見出し

1 ソース
2 on()を使ってセレクタを指定する
3 リファレンス

ソース

<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>

<body>

</div>

$('#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で電話番号チェック

やりたかったことはjavascriptかjQueryで電話番号のバリデート。 ...

: jQueryでドロワーメニューの作成

■やりたかった事スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

: プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを作りたかった。内容としては、・ターゲ ...

: jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

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

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

: 簡単にtable内をソート

やりたかった事は、・テーブル内でのソート・内容は文字、数値、日時・PHPじ ...

: jQueryで偶数or奇数行にclassを付与

やりたかった事は、・PHPは使えなくてjavascriptかjQueryを使用 ...

: jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるかどうか検索し、その後の分岐を行いた ...

: GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...

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

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

PREV: mysqlでrootのパスワードが分からない場合
NEXT: RLoginで秘密鍵の使用

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

ソース

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

リファレンス

関連記事