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

09/29/2012

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”]

PROFILE

入江慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）

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

SHARE

PROFILE