jQueryへのアクセスが追加されたDOM

Question

jQueryを使用して別のDOM要素に画像を追加しています。今、私は追加されたイメージをフェードアウトすることはできませんでしたが、文書がロードされた後にイメージが追加されたので、うまくいかないでしょう。ここで

は私のコードでは、まずjQueryのDOMオブジェクトとしてimgを作成し、

$('#t' + u).html('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>').find('img').fadeOut(5000); 

Answer 1

代わりのhtml()を使用しています。その後、コンテナに追加してフェードアウトすることができます。

var $img = $('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>'); 
var $container = $('#t' + u).empty(); 

$img.appendTo($container).fadeOut(5000); 

• jsFiddle Demo
• .appendTo()
• 私は.html()
• Creating DOM elements from an HTML string with $()

---

問題の "浄化" 効果をエミュレートするため.empty()を使用しますイメージがロードされる前にアニメーションが開始する可能性があるため発生します。 @adaneoが正しく示唆しているように、.load()メソッドを使用すると、イメージがロードされ、アニメーションが開始されるときにイメージにイベントハンドラを追加できます。これにはまだcross-browser issues (see Caveats)がありますが、loadイベントが発生しなかった場合には、数秒でアニメーションを開始できます。

$img.on('load', function() { 
    $(this).fadeOut(5000); 
}).appendTo($container); 

setTimeout(function() { 
    $img.trigger('load'); 
}, 2000); 

jsFiddle Demo

Answer 2

bazmegakapaの答えはかなり良いですが、私は自分で行くと思いますが、ここでもう一つの方法である：ドキュメントがロードされている（と、そのイベントにアタッチスクリプトが持つと

その後に追加されたHTMLは、あらかじめスクリプトで使用できません。

だからまだ存在しない要素を選択するために、私が知っている他の二つの方法があります。

あなたはまだ存在しない要素にハンドラをバインドする.on()を使用することができます。これは私がおよそたくさん知っているものではありませんが、これは役立つかもしれない： http://api.jquery.com/on/

、あなたがそれにハンドラをバインドする前にHTMLを追加するまで、別の方法が待っている - 例：

$(function(){ 
    //i run when the doc loads 
    $.get('someurl', function(data){ 
     $('body').append('<img src="'+data+'" id='myNewElem'/>'); 
     //I run after the element is added to the DOM, so I can select it here 
     $('img#myNewElem').fadeOut(); 
    }); 
}); 

は再び私はいいと思います個人的にはこれまでの答えで、これはあなたが同じことを成し遂げることができる他の方法です。

EDIT：

ビットより関連性のあなたにある第三のオプションを使用すると、ページに追加画像に負荷（）イベントを添付して、イメージのロードが完了したら、それをフェードアウトすることです。

例：

$('#elem').html('<img src="someSrc" id="myImage">'); 
$('#myImage').load(function(){ 
    $(this).fadeOut(); 
}); 

画像がページ上に表示される前にこれが起こってフェードを防止するであろう。

ホープこれは

Answer 3

あなたはそれがうまく動作するはずやって道に役立ちますが、このような画像のロードのチェック、何かがあるはず。と間違って何

$('#t' + u) 
    .html('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>') 
    .children().load(function() { 
     $(this).fadeOut(5000); 
    }); 

FIDDLE