JQuery Image Upload Callback

Question

Dynamically adding an image to the page after loading, and then interacting with the user, and I had problems launching the function after this image was fully loaded. I realized that using the jQuery .load() method would be fine ... but according to my console and the .log business documentation link, it never ran. See below .. thanks!

 $('body') .append('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />') .load(function(){ console.log('ad load complete'); $('#submit').click(); }); 

---

UPDATE:

To clarify, this happens after loading document and window .

Answer 1

In the code .load() is associated with body due to chaining.

Change the code to:

 var img = $('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />'); img.load(function(){ console.log('ad load complete'); $('#submit').click(); }); $('body').append(img); 

and it should work ( http://jsfiddle.net/zerkms/f7epb/ )

Answer 2

The append function returns the contained element, not the one that was added, so you are binding your function to loading the body, not to img.

I suggest using appendTo, for example:

 $('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />') .load(function(){ console.log('ad load complete'); $('#submit').click(); }) .appendTo($('body'));