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

• Tweet

PROFILE

入江 慎吾
教える、学べるオンラインメンターサービスMENTAの代表 / 2-30個のサービスをつくり、M&Aで億単位の売却 / 受託開発20年→受託をやめサービス開発に専念→個人開発でつくったMENTAがヒット→ランサーズグループにジョイン / YouTubeで「サービスづくりで生きていく」配信中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）

SUBSCRIBE

SPONSOR