title: Jquery - Dynamic Form Elements not submitting
body: <p>My problem is that I made a page to work basically like the jQuery demo of a modal-form dialog box, except that after you've added all the rows you want, it will submit them at the end. 
  The reason i don't just AJAX this to work where as the rows are created they are saved, is because the form contains dynamic rows created from PHP &amp; SQL which are linked to the rows that get added using the modal-form and need to be processed once all the rows have been added.</p>
  
  <p>The form page has a bunch of rows created using PHP from 1 to X.</p>
  
  <pre><code>&lt;table&gt;
  &lt;form action="submitform.php" method="POST"&gt;
  &lt;input type="hidden" name="order" value="X"&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="1" value=""&lt;/td&gt;&lt;/tr&gt;
  &lt;div id="1"&gt;&lt;/div&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="2" value=""&lt;/td&gt;&lt;/tr&gt;
  &lt;div id="2"&gt;&lt;/div&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="3" value=""&lt;/td&gt;&lt;/tr&gt;
  &lt;div id="3"&gt;&lt;/div&gt;
  ...
  ...
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="X" value=""&lt;/td&gt;&lt;/tr&gt;
  &lt;div id="X"&gt;&lt;/div&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When the text fields are changed, a popup asks for more information and then adds rows below the text box that has changed.
  The above <code>&lt;DIV&gt;</code> tags are filled with extra form elements using jQuery when the popup is completed.</p>
  
  <pre><code>itemHiddenInfo = "&lt;input type='hidden' name='"+temp2+"A"+x+"' value='"+itemNum+"_"+itemID+"'/&gt;";
  $( "#"+itemDiv ).append("&lt;tr id='"+temp2+"_"+x+"R' class='"+temp2+"'&gt;" +  
  "&lt;td&gt;" + itemHiddenInfo + itemMat + "&lt;/td&gt;" + 
  "&lt;td&gt;" + itemQty + "&lt;/td&gt;" + 
  "&lt;td&gt;" + itemNote + "&lt;/td&gt;" + 
  "&lt;td&gt;" + "&lt;button id='"+temp2+"_"+x+"' class='remmy'onclick=$('#'+this.id+'R').remove()&gt;REMOVE&lt;/button&gt;" + "&lt;/td&gt;"+ "&lt;/tr&gt;"); 
  </code></pre>
  
  <p>And everything visually looks great, the rows appear and disappear when they are suppose to and using the Firefox development tools, I can see the DOM has been modified to include all the elements i have added, but when i try to submit the form using either a "SUBMIT" button or via jQuery AJAX and <code>.sequence()</code> to gather the form elements, neither way will recognize any of the new form elements added in the <code>&lt;DIV&gt;</code>'s.</p>
  
  <p>The <code>&lt;DIV&gt;</code> on the page which is used to display the modal-form is dynamically generated using another PHP file which is populated using the <code>$.get</code> method with the results populating the forms <code>&lt;DIV&gt;</code>.  The fields which get populated on this form do get submitted which is why it seems odd that the other fields added do not.</p>
  
  <p>I've searched around and it seems like I am doing everything correctly but it doesn't want to cooperate.
  Am I doing trying to do something that is impossible or am I missing something here?</p>
  
  <p>Any help is greatly appreciated.</p>