javascript - jquery: event for when ajax loaded content is all loaded (including images) -

i'm loading in html via ajax, need event catch on when new images loaded...

becuase it's in div , not whole page, can't use $(window).load(....

i've tried following doesn't work:

$('.banners_col img:last').load(function(){..... 

you need target results of ajax call before inserting them in dom.

so need use callback method provided jquery reason.

$('#load').click(function(){     // inside handler calls ajax      //you ajax call here     $.get('the_url_to_fetch',function(data){          // create in-memory dom element, , insert ajax results         var $live = $('<div>').html(data);          // apply load method images in ajax results         $('img',$live).load(function(){            // each image loaded         });          // add ajax results in dom         $('selector_where_to_put_the_response').html($live.children());     });  }); 

example @ http://www.jsfiddle.net/gaby/sj7y2/

---

if there multiple images in ajax response , want notified when all of them loaded use modified version

$('#load').click(function(){     // inside handler calls ajax      //you ajax call here     $.get('the_url_to_fetch',function(data){          // create in-memory dom element, , insert ajax results         var $live = $('<div>').html(data);         // count number of images         var imgcount = $live.find('img').length;          // apply load method images in ajax results         $('img',$live).load(function(){            // each image loaded             imgcount--;            if (imgcount==0)            {                // code in here called when images have loaded.            }         });          // add ajax results in dom         $('selector_where_to_put_the_response').html($live.children());     });  }); 

example @ http://www.jsfiddle.net/gaby/sj7y2/1/

---

if remove comments , empty lines, not code :) not intimidated..