勉強したことのメモ

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

  関連記事

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

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

画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

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

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

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jQueryで高速化

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

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

簡単にtable内をソート

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