jquery - knowing when dynamically added data in div finshed loading -

i loading html data via ajax, containing images, div on page using

$('#container').html(data) 

assuming variable data ajax returned, how can know when new data (and images) finished loading in container?

what looking .promise().done(). these useful in situations when want wait , animations running on collection or jquery object finish, without passing code in individual callbacks.

if looking call code or handler on content loaded should @ .load() event , delegated event handlers. may not need both, should read, know, , understand them anyway. can read delegated event handlers in docs .on() method.

quick summary of delegated event handlers

delegated event handlers handlers attach ancestor element of content (which may or may not have been loaded yet) want listen on.

the following example of delegated click handler being bound body element , set listen click event on descendant element class foo. means handler listen , every element class foo (even added later , not yet loaded dom) descendant of body element.

$("body").on("click", ".foo", function() {     bar(); }); 

the below same thing, except binds handler .foo elements exist @ time handler bound. handler not listen .foo elements added later.

$(".foo").on("click", function () {     bar(); }); 

by passing selector argument .on() method, can tell jquery rather listen specified event happen on bound element, should instead listen propagated (or bubbled) event originated descendant matching given selector reach bound element, , should call handler using descendant triggered event the context object (this) handler.

relevant links jquery's api

• deferred.promise() docs
• deferred.done() docs
• .load() docs
• .on() docs