title: jquery .serialize() does not work on dynamically loaded form
body: <p>I have a form which is submitted via ajax triggered by an image click, after the form is submitted it is returned and reloaded. However the .serialize() has stopped working.</p>
  
  <p>here is some code:</p>
  
  <pre><code>&lt;form id="myForm" action="/someFormSubmitPage.do"&gt;
      &lt;div id="myFormQuestions"&gt;
          &lt;input type="text" name="fred"/&gt;
          &lt;!--more inputs--&gt;
      &lt;/div&gt;
   &lt;img id="submitButton" src="some/path"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>image of the submit button triggers via .click in jquery the below function</p>
  
  <pre><code>var serializedForm = $("#myForm").serialize();
  $.post("/someFormSubmitPage.do", serializedForm, function( data ) {
      //do some stuff with the data
      $( "#myFormQuestions" ).html(data);
  });
  </code></pre>
  
  <p>this works fine on the first submit, but on the second, the var serialized form ends up as an empty string despite the user repopulating the inputs</p>
  
  <p><strong>EDIT:</strong>
  I have now included a <a href="http://jsfiddle.net/pHEsn/6/" rel="nofollow">JSFiddle</a>, however, im not sure how to use the ajax tesing echo thing.</p>