HOME > 開発メモ > Jqueryで動的に追加したidやclass属性でもイベントを動かす方法
2012/09/29 (2016/09/14更新) タグ:

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

  • このエントリーをはてなブックマークに追加

Jqueryにてloadやappendなどで、動的にタグを追加した後に、例えばclickイベント等を動かしたい場合の方法について。もともと用意されているlive関数を使うと解決します。

SPONSOR

例えば

$(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("読み込みしたものもイベントを呼び出せる")
	});
});

このように書き換えることで、動的に読み込ませたものもイベントを扱えるようになります。

この記事をシェアする
  • このエントリーをはてなブックマークに追加

SPONSER

こちらの記事もおすすめです

お役にたちましたら、メール購読もどうぞ!

 

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクのプロフィール
入江 慎吾
System & Design Developer。イリテク株式会社 代表取締役。自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「開発までできるシステム顧問サービス」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ
SPONSER