jquery で


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

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

});

で記述しているのを

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

});

にしても、変わりません

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/12/27 14:00:00
  • 終了:2014/01/03 14:00:06

回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4545ベストアンサー獲得回数18952013/12/27 14:21:29

ポイント200pt

そういうときには、.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>

一応、動きます。

id:Lhankor_Mhy

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

2013/12/27 15:49:01
id:yayayai

質問文を編集しました。詳細はこちら

  • id:language_and_engineering
    >jquery で動的に生成した要素を、さらにその後、eachで回すと参照できません。

    普通は,参照できます。
    ですので,生成のタイミングと,eachで回すタイミングの前後関係が問題のはずです。

    そうなると,ご提示いただいたコードだけでは回答ができません。
    もっと大きな範囲で,できればコード全体をご提示可能ですか?
  • id:yayayai
    ご回答ありがとうございました。
    おっしゃるとおりで、その後、原因がわかりました。
    実は、別途設定として、var aaa = $.(セレクター)
    aaa.each のような処理を書いていました。

    そのため、aaaには、追加分がはいっておらず、参照できない形となっていました

    var aaa としたのは、ターゲットのセレクタを実行ソース上ではなく、設定としたいためそうしていました。

    追加したあとに、aaa=aaaのように入れ直せばよいですかね。

  • id:language_and_engineering
    >aaa=aaa
    えーと…。

    追加するか、入れ直せばよいのは事実です。
  • id:yayayai
    ありがとうございます。
    var aaa = "div";
    $(aaa).each
    のようにすることで解決しました。
    お礼の気持ちとして少々で恐縮でありますが
    ポイント付与させていただきたいと思っております

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません