title: how to cache loaded html with JQuery
body: <p>I have a Javascript function that loads some html from the server:</p>
  
  <pre><code>function addPerson(){
      var p = $('&lt;div&gt;').load('data/person.php',function(){
          //set click and key actions
  
          $('#element').append($(this));
      });
  
      return p;
  }
  </code></pre>
  
  <p>and I want to have another function that will load some data into the elements after adding them so if the user is coming back:</p>
  
  <pre><code>function loadPerson(){
      var ep = addPerson();
      ep.find('#txtName').val('My Name');
      //and so on
  }
  </code></pre>
  
  <p>but the loadPerson never fills in any of the info. I debugged in fireant and realized that the value of ep is always an empty div which made me realize the element is being cached before the asynchronous query finishes. Any idea on how to return the element completely loaded?</p>
  
  <p>P.S. I need both functions!</p>
  
  <p>EDIT:</p>
  
  <p>I have also tried this without luck:</p>
  
  <pre><code>function addPerson(){
      var p;
      $('&lt;div&gt;').load('data/person.php',function(){
          //set click and key actions
  
          $('#element').append($(this));
          p = $(this);
      });
  
      return p;
  }
  </code></pre>