勉強したことのメモ

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

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

      2014/05/19

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

  関連記事

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

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

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

jQueryでセレクトメニューにcheckedをつける

セレクトメニュー(セレクトボックス)で特定の項目をデフォルトで選択しておきたかっ ...