人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jquery で

$(window).load(function() {
後に、動的に生成した要素
を、その後、eachで回すと参照できません。

$("div").click(function() {

});

で記述しているのを

$(document).on('click', 'div', function(){

});

にしても、変わりません

原因教えてください。
よろしくお願いします。

●質問者: FujiiRock
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●200ポイント

そういうときには、.live() メソッドを使います。

$(document).live('click', function(){
 ...
});

http://api.jquery.com/live/






【追記】

その書き方だとdocumentにイベントハンドラがついてしまいますし、live メソッドは1.7で非推奨、1.9で廃止となっていますから、質問者の書いたとおり on メソッドを使った方がいいです。

ぐだぐだな回答だったので、サンプルコードを書いてみました。

こちらが最初に表示されているページ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
 $("#button").click(function() {
 // id="dest" の内容を include.html で置き換える
 $("#dest").load("include.html", function (txt) {
 // include.html で追加されるはずの class="aaa" のクリックイベントを登録
 $(document).on("click", "div.aaa", function() {
 alert(this.innerHTML)
 })
 })
 })
})
</script>

<button id="button">go</button>
<!-- include.html が差し込まれる領域 -->
<div id="dest"></div>

こちらがボタンをクリックしたときに、読み込まれる include.html の内容。

<div class="aaa">1</div>
<div class="aaa">2</div>
<div class="aaa">3</div>

一応、動きます。


Lhankor_Mhyさんのコメント
その書き方だとdocumentにイベントハンドラがついてしまいますし、live メソッドは1.7で非推奨、1.9で廃止となっていますから、質問者の書いたとおり on メソッドを使った方がいいです。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ