jQuery/Javascript - how to detect that image was re-loaded

Question

Hi, I have a several actions that can be taken on the screen that would cause image to be re-loaded via Ajax call (non-jQuery). I need a way to detect that image has been reloaded so that I can attach event handler to the image again. How can I do this?

Answer 1

An alternative way of doing it is to use the live event in jQuery.

Which binds handlers to currently existing (selected) elements and any others which may appear later on (through a XMLHttpRequest or simply DOM handling). This means you don't have to detect if an image or other element has been reloaded, it binds the events for you automatically.

Answer 2

It's not clear to me whether the ajax is simply updating the src of an image, or whether you have whole new chunks of html with <img> tags in them.

In any case, this should bind an onload event to any image on the page and any img that gets added to the DOM.

$('img').live("load", function(e){
  // fires when an img tag has an onload event fire.
});