innerHTMLで挿入するhtmlにもjqueryを実行させたい。


あらかじめJavaScriptのソースに、

$(function() {
$('#divHoge').hoge();
});

を記述しておき、JavaScriptのinnerHTMLで

<div id="divHoge"></div>

を挿入した時にhoge()を実行させたいのですが、innerHTMLで普通に挿入すると実行されないようです。実行する方法はあるでしょうか?

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/04/27 21:45:11

回答1件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

jQuery.fn.extend({
	hoge: function() {
		return this.text('hoge')
	}
});

$(function() {


$(document).on('DOMNodeInserted', '#divHoge', function() {
	$(this).hoge()	
});

/*
$('#divHoge').live('DOMNodeInserted', function() {
	$(this).hoge()	
})
 */

setTimeout(function() {
	document.body.innerHTML = '<div id="divHoge">piyo</div>';
}, 1000);

});
</script>
  </head>
  <body>
  </body>
</html>

jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記

id:Cherenkov

live系でDOMNodeInsertedを待ち構えてるのは負荷が高いかもしれない。(よくわからん)
適当にinnerHTMLした後にsetTimeoutでhoge()する方がいいかも。

2012/04/21 10:35:07
id:koime_ryokutya

回答ありがとうございます。
おかげさまでうまくいきました!
ありがとうございました。

2012/04/30 10:30:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません