2009-06-18 10 views
2

jQuery経由でdivのセットを動的に追加してから参照して参照する必要があります。あなたがこれを行うことができないのは本当に奇妙です。なぜなら、あなたがファイアバグでDOMを見ると、要素がそこにあるからです。 jQueryは存在するように動作しません。jQuery appendTo関数の後の要素の選択

HTML ...

<div id="images"></div> 

これは

...私に <div> ...

 $.getJSON("http://localhost/wordpress/test.php", 
     function(data){ 
      $.each(data, function(i,item){ 
      $("<img/>").attr("src", item).appendTo("#images"); 
      }); 
     }); 

に追加私の要素を与えるその後、私はすぐに画像を選択して使用するようにしてください

 $("img").each(
      function(i,item) { 
       alert(item); 
      }); 

jQueryは、新しく追加された要素のいずれも選択しません。基本的には画像が追加されていないように動作します。

答えて

5

コードの2番目のブロックを実行すると、イメージはまだ存在していないはずです。 getJSON呼び出しは非同期です。これは、いつ返ってくるのか分からず、イメージ要素をページに追加することを意味します。

appendToを呼び出すのと同じ関数で2番目のコードブロックを追加しようとしましたか?これは、人々が非同期コードを行うときの混乱の一般的な原因です。

+0

私はあなたが正しいと思います。彼の2番目のスニペットは画像が追加される前に実行されています。いいですよ。 –

+0

おかげさまで、私が毎回ニッケルを持っていたら、私はジャバスクリプトのキャリアの初期に間違いを犯しました。私は引退することができます。 –

3

ページロード後に新しいイメージがDOMに挿入されるため、jQueryのlive functionを使用する必要があります。簡単な例として、

$("img").live("click", function() { 
    alert(this); 
}); 

にかかわらず、それを添加したときの、ページ上のすべての画像の上にアラートをトリガーします。あなたの典型的な$("img").click()は添付された画像では機能しませんでした。

+0

+1 O.P.がイベントバインディングをやっていないように見えますが、いくつかの選択肢がありますが、これはしばしばもう一つの素晴らしい原因です。 – Funka

+0

私が正しく読んでいれば、私が動的に作成したDOMの要素を単純に選択することに関して、「生きている」とは私には役に立ちませんか? 粉化は、あなたが正しいです: 1. JSON 2にゲット非同期に基づいて要素を作成結合が起こってイベントがない新しく作成された要素 を選択します。 –

+0

あなたの記事を読んだ後、私は今Jeremy Wallと同意するつもりです。 2つ目のコードスニペットを最初にイメージを追加しているgetJSON関数に移動してみてください。セレクタがまだ配置されていない要素にアクセスしようとしています。 getJSON関数に移動すると、appendが完了した後にのみ実行されます。 –