title: jQuery callback after append
body: <p>I have the following code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="body"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var site = { 'pageData' : [
      {   
          'loadInTo'      :   '#aboutUs',
          'url'           :   'aboutUs.html',
          'urlSection'    :   '.sectionInner'
      },
      {   
          'loadInTo'      :   '#whatWeDo',
          'url'           :   'whatWeDo.html',
          'urlSection'    :   '.sectionInner' 
      },
      {   
          'loadInTo'      :   '#ourValues',
          'url'           :   'ourValues.html',
          'urlSection'    :   '.sectionInner' 
      },
      {   
          'loadInTo'      :   '#ourExpertise',
          'url'           :   'ourExpertise.html',
          'urlSection'    :   '.sectionInner' 
      }   
  ]}
  
  for(i=0; i &lt; site.pageData.length; i++) {
      var loader = site.pageData[i];
  
      $('#body').append('&lt;div id="'+ loader.loadInTo +'" class="section" /&gt;');
      $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);      
  }
  </code></pre>
  
  <p>What I am doing is looping through the site variable and writing out some div's using jQuery's append method that have the id set in 'loadInTo', this works fine. After this is complete I want to use jQuery's load method to populate the divs with HTML from other pages. Is there a to make a callback after appending the div's? something like this:</p>
  
  <pre><code>$('#body').append('&lt;div id="'+ loader.loadInTo +'" class="section" /&gt;', function(){
          $(loader.loadInTo).load(loader.url + ' ' + loader.urlSection);
      });
  </code></pre>