勉強したことのメモ

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

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

   2014/05/19  jQuery

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

liveやonを使うことで回避できた。

jQuery
$(function(){
//追加された要素に対してはきかない
$('.hoge').bind('click', function(){
$(this).after('<li class="hoge">aaa</li>');
});

//追加された要素に対してもきく
$('.hoge').live('click', function(){
$(this).after('<li class="hoge">aaa</li>');
});

//追加された要素に対してもきく
$(document).on('click', '.hoge', function(){
$(this).after('<li class="hoge">aaa</li>');
});
});

■html
<ul class="fuga">
<li class="hoge">aaa</li>
<li class="hoge">aaa</li>
<li class="hoge">aaa</li>
<li class="hoge">aaa</li>
</ul>

■リファレンス
on()
http://s3pw.com/jQ-JPN/on/
live()
http://s3pw.com/jQ-JPN/live/

■参考サイト
http://lealog.hateblo.jp/entry/2012/01/22/001542
http://tacamy.hatenablog.com/entry/2013/03/03/213113

 - jQuery

  関連記事

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法

jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...