title: jQuery load event fire when html code is appended
body: <p>I am using jQuery's ajax function <code>$.get()</code> to download data from a page. I then cast that data to a jQuery object with <code>$(data)</code>, allowing it to construct a DOM tree. I then append this data using <code>append()</code></p>
  
  <p>Is there a way for jQuery to fire an event similar to <code>load</code> which would tell me when the data's iframes/images/videos are done loading? Either before or after the <code>append()</code>?</p>
  
  <p>According to the jQuery documentation, the <code>load</code> event only fires on specific objects:</p>
  
  <blockquote>
    <p>This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.</p>
  </blockquote>
  
  <p>I could loop through all of the data and attach a <code>load</code> listener to each of these objects, then count how many there are and have the <code>load</code> handler count how many have loaded (or have already been cached) until the number reaches the total. However I am looking for an alternative to this solution.</p>
  
  <p>I have tried to attach the <code>load</code> event to the <code>window</code> object through <code>load()</code> and <code>on()</code> but these only fire once when the active page is initially loaded.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>$.get(url_string, function(data) {
      // Create DOM elements out of the downloaded html text 'data'
      // and take a subset of the DOM elements, where the id is #content
      var myContents = $(data).find("#content");
  
      // Insert DOM elements into the active page
      $("#destination").append(myContents);
  
      // Check when all images/iframes/video elements have loaded
      // Does not work
      $("#destination").load(function() {
          alert("new stuff loaded");
      });
  
      // Does not work either
      myContents.load(function() {
          alert("new stuff loaded");
      });
  });
  </code></pre>
  
  <p>This question is linked to </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/4625918/jquery-event-once-all-images-are-loaded-including-cached-images">jquery event once all images are loaded (including cached images)?</a></li>
  <li><a href="https://stackoverflow.com/questions/910727/jquery-event-for-images-loaded">jQuery event for images loaded</a></li>
  <li><a href="https://stackoverflow.com/questions/4488874/jquery-event-for-when-ajax-loaded-content-is-all-loaded-including-images">jquery: event for when ajax loaded content is all loaded (including images)</a></li>
  </ul>
  
  <p>but the solution offered in these are all the one I mentioned above, where I would have to count how many of the objects there are, then check when the total is reached.</p>