title: Jquery Ajax form using .on("submit",
body: <p>I have a page with several html forms on it. Below is the jquery code to submit the forms via an ajax call. It does make the ajax call when any form in the content div is submitted. It does fire even after the form is reloaded via ajax. I cannot figure out how to pass the form data to the handler function. Any help would be greatly appreciated. </p>
  
  <p>To Clarify: var formData = $(this).serializeArray(); is not working. formData is not getting values from the form fileds.</p>
  
  <pre><code>$.ajaxSetup({
    url: "ajax.php",
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    datatype: 'json',
    cache: false,
    timeout : 5000
  });
  $("#content").on("submit", function(e) {
    e.preventDefault();
    var formData = $(this).serializeArray();
    $.ajax({
      data: formData,
      success: function(jsonData) {
          htmlData = jQuery.parseJSON(jsonData);
          $.each(htmlData, function(id, data){
              $("#"+id).html(data);
          });
      }
  });
  };
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>If I change </p>
  
  <pre><code>$("#content").on("submit", function(e)
  </code></pre>
  
  <p>to </p>
  
  <pre><code>$("#content").on("submit", "form", function(e)
  </code></pre>
  
  <p>the form data is serialized and the ajax function works as intended. The new problem is that if the form is not complete and it is reloaded (via ajax) into the content division, the submit event no longer triggers the function. I was trying to configure .on() to function the way .live() did in earlier versions of jquery. It would rebind the submit event after the ajax reload. In this case, .on() is not rebinding. Hope that makes some sense!</p>