勉強したことのメモ

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_logo
lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

jquery_logo
スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

jquery_logo
bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

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

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jquery_logo
Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

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

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

jquery_logo
tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...

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

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

jquery_logo
画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

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

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