title: jQuery Ajax form will only bind once to submit
body: <p>I have two problems. If I load my page directly, my form will only submit once. If I load the form in a modal, it will not submit at all.</p>
  
  <p>On success I want to redisplay the form (loaded with via ajax) and still have the script re-bind to the form.</p>
  
  <p>HTML/jQuery <strong>EDITED</strong></p>
  
  <pre><code> &lt;div class="modal-content"&gt;
        &lt;form id="userSignUp"&gt;{{FORM ELEMENTS}}
        &lt;input type="submit" onclick="submitForm('#userSignUp',event)"&gt;
    &lt;/form&gt;
   &lt;/div&gt;
   &lt;script&gt;
   function submitForm(formID,e){
          //e.preventDefault(); //STOP default action 
          var postData = $("#"+formID).serializeArray();
          var formURL = $("#"+formID).attr("action");
          alert(formID);
          $.ajax(
          {
              url : formURL,
              type: "POST",
              data : postData,
              cache: false,
              success:function(data, textStatus, jqXHR) 
              { 
                  $('.modal-content').html(data);
              },
              error: function(jqXHR, textStatus, errorThrown) 
              { 
                  $('.signUpError').html('&lt;div class="alert alert-warning"&gt;There was a problem communicating with the site. Refresh the page and try again.&lt;/div&gt;');
              }
          });
  
          e.preventDefault(); //STOP default action 
      }
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> I have updated my script - but now the problem seems to be that everytime the form submits, it wants to use the data submitted in the first form. it doesn't seem to be reserializing the udpated data.</p>