jQuery .load() odd

Question

I´m building an example of google images search. I have a grid of images (the search result). When clicking on one of the images I'm loading an html document in a section tag I create with jquery. The odd thing is that if you look at the developers tool the html is loaded, but it is not rendered on the screen (not completely at least): the html has an image whith a global src link, h1, p and a button tag. I say it´s not completely rendered because the image, although empty, and the button are on the screen, but not the other elements.

An oddest thing is that if you click in another image an loads again the html doc (now you have two, I´m working on that), this time de happens the same thin except that the image is rendered correctly.

Other thing, I think related with this load problem, is that I can´t give css properties to any of this loaded elements.

Here is my code jquery

$('img').click(function() {
$('<section id="imageSection"></section>').prependTo('body').load('imageDetail.html');
$('#placeHolder').attr('src','http://fillmurray.com/g/900/450');

});

Any idea what could be happening here?

======================= edit ======================

First of all, thanks for taking some time in reading and answering me.

I've discovered that this code does nnt work the same way depending on the browser, which surprises me a bit, because I´m testing with lastest versions of Safari, Chrome and FireFox. In Chrome the html fragment doesn't even load. This seems to work fine on Safari and FireFox, although some elements (h1 and p) are still invisible (I see them on the console but not on the screen. I've tried z-index to force them up incase they were behind something).

I would make a fiddle as soon as I can.

Thanks again!

Answer 1

As @matt-ball said, you should use callback function because .load() is asynchronous (see jQuery documentation):

$('img').click(function() {
    $('<section id="imageSection"></section>').prependTo('body').load('imageDetail.html',function(){
        $('#placeHolder').attr('src','http://fillmurray.com/g/900/450');
    });
});