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
関連記事
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
-
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...