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

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は約1ヶ月で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす