CODEWITHSUNDEEP
jquerychainingdom-manipulation
Anton Gildebrand
Anton Gildebrand

Reputation: 3707

jQuery access DOM that's just been added

I am adding an image using jQuery to another DOM-element. Now i wan't to fadeout that image that was added, but it's not going very well, i guess because the image was added after the document was loaded!?

Here is my code 

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

Upvotes: 1

Views: 149

Answers (3)

kapa
kapa

Reputation: 78731

Instead of using html(), create the img as a jQuery DOM Object first. After that you can append it to the container and fade it out.

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

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

Problems will arise because the animation might start before the image is loaded. As @adaneo correctly suggested, the .load() method can be used to add an event handler on the image when it is loaded and let that start the animation. This still has some cross-browser issues (see Caveats), but you can start the animation in a few seconds in case the load event did not fire.

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

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

jsFiddle Demo

Upvotes: 2

adeneo
adeneo

Reputation: 318312

The way your doing it should work just fine, but there should be a check for image load, something like this:

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

FIDDLE

Upvotes: 1

totallyNotLizards
totallyNotLizards

Reputation: 8569

bazmegakapa's answer is pretty good, I'd go with that myself but here is another way:

Once the document has been loaded (and the script attached to that event has been run), any HTML added after that isn't available to the script beforehand.

So there are two other ways I know of to select an element that doesn't yet exist:

You could use .on() to bind a handler to an element that doesn't yet exist. This isn't something I know alot about but this might help: http://api.jquery.com/on/

Another way is wait until you add the HTML before binding a handler to it - example:

$(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();
    });
});

Again I'd go with the previous answer personally, these are just other ways you can accomplish the same thing.

EDIT:

A third option that is a bit more relevant to you is to attach a load() event to the image you add to the page, and fade it out once the image finishes loading.

Example:

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

This would prevent the fade happening before the image is visible on the page.

Hope this helps

Upvotes: 0

Related Questions