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

2018/03/23更新 カテゴリー:開発奮闘記 タグ:
  • このエントリーをはてなブックマークに追加

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

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

iPhoneアプリ開発のTips一覧はこちら

効率のいいiOSプログラミング習得法

独学でプログラミングをはじめてもう16年。
なかなか勉強が進まない人のために記事を書きました。

フリーランスエンジニアの稼ぎ方

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

PROFILE

プロフィール

入江 慎吾/サービス開発だけで生きていく
15年続けた受託開発をやめ、自分が作ったサービスだけで生きていくことを決意。同じゴールを目指す仲間が集まる入江開発室を運営 / 師弟関係がつくれるサービス「MENTA」をつくりました。
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす