Jqueryで動的に追加したidやclass属性でもイベントを動かす方法

Jqueryにてloadやappendなどで、動的にタグを追加した後に、例えばclickイベント等を動かしたい場合の方法について。もともと用意されているlive関数を使うと解決します。
例えば
$(document).ready(function(){ $('.abcde').click(function() { $(this).load("./test.html"); }); $('.fghij').click(function() { alert("読み込みしたものもイベントを呼び出せる") }); });
このようにして、abcdeクラスがある箇所にtest.htmlを読み込むようにします。
そして、読み込むtest.htmlの中身は
<div class="fghij">fghij</div>
として動的に読み込ませた場合、fghijをクリックしても何もおこりません。
これを動かにはlive関数を使います。
$(document).ready(function(){ $('.abcde').click(function() { $(this).load("./test.html"); }); $('.fghij').live('click',function() { alert("読み込みしたものもイベントを呼び出せる") }); });
このように書き換えることで、動的に読み込ませたものもイベントを扱えるようになります。
[sc name=”ios”][sc name=”engeneer”]
SHARE
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)