title: Submitting dynaically created complex form with jQuery without refresh
body: <p>How do I use jQuery.post with a complex dynamically created form?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="/media/css/screen.css" /&gt;
  &lt;script&gt;
  var id = 0;
  
  function removeField(fieldId) {
      $('#field_'+fieldId).hide();
  }
  
  function addField(fieldType) {
      var html = '&lt;tr id="field_'+id+'"&gt;&lt;td&gt;&lt;input type="button" value="X" onclick="removeField('+id+')"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="hidden" name="field_'+id+'_type" value="char"&gt;&lt;input name="field_'+id+'_name" type="text" value="" /&gt;&lt;/td&gt;&lt;td&gt;'+fieldType+'&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox"  name="field_'+id+'_unique" /&gt;&lt;/td&gt;';
      switch (fieldType) {
          case 'char':
              html += '&lt;td&gt; &lt;strong&gt;Max length:&lt;/strong&gt; &lt;input name="field_'+id+'_max_length" type="text" value=""/&gt;&lt;/td&gt;';
              break;
          case 'foreignkey':
              html += '&lt;td&gt; &lt;strong&gt;Related model:&lt;/strong&gt; &lt;input name="field_'+id+'_related_model" type="text" value=""/&gt;&lt;/td&gt;';
              break;
      }
      html += '&lt;/tr&gt;';
      $('#fields').append(html);
      id += 1;
      $('#fields').show();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form action="/create_model/" method="post"&gt;
  
  &lt;strong&gt;Model name:&lt;/strong&gt; &lt;input type="text" name="name" /&gt;&lt;br/&gt;
  &lt;table id="fields"&gt;&lt;th style="width:10px;"&gt;&lt;/th&gt;&lt;th style="width:100px;"&gt;Name&lt;/th&gt;&lt;th style="width:50px;"&gt;Type&lt;/th&gt;&lt;th style="width:25px;"&gt;Unique&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;strong&gt;Add field:&lt;/strong&gt; &lt;input type="button" value="Char" onclick="addField('char');" /&gt;
  &lt;input type="button" value="ForeignKey" onclick="addField('foreignkey');"/&gt;&lt;br/&gt;
  &lt;input type="submit" value="Create Model" /&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>