title: Why won't jQuery's .submit() work?
body: <p>I'm creating a form that fires <code>$.ajax()</code> on submit. However, for whatever reason, neither <code>.on("submit", function(){})</code> or <code>.submit()</code> will respond to a form submission. Why doesn't jQuery's submit function or event work? Am I overlooking something?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($) {
  
      // show/hide the $modal.
      var $modal = $(".modal"),
          $modalBody = $modal.find(".modal-body"),
          $formFinish = $(".modal-finished"),
          $button = $("#openModal");
  
      // Get the form.
      var $form = $("#ajax-contact"),
          formData = $form.serialize();
  
      $button.on("click", function() {
          $modal.fadeIn("600");
      });
  
      $modal.on("click", "#closeModal", function() {
          $modal.fadeOut("600");
      });
  
      // Get the messages div.
      var $formMessages = $("#form-messages");
  
      $form.submit(function(event) {
          event.preventDefault();
  
          // Submit the form using AJAX.
          var $submitForm = $.ajax({
              type: "post",
              url: wp_urls.ajax_url,
              data: {
                  action: submit_form,
                  form: formData
              }
          });
  
          $submitForm.done(function(response) {
              alert("Succeed!");
              $modalBody.hide();
              $formFinish.show();
          }).fail(function(response) {
              alert("Fail!");
          });
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="modal"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" id="closeModal"&gt;×&lt;/button&gt;
          &lt;h3&gt;Request Pricing Information&lt;/h3&gt;
      &lt;/div&gt;
      &lt;form class="modal-body form-horizontal" id="ajax-contact"&gt;
          &lt;fieldset&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;First and Last Name&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" name="name" required=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;Email&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="email" name="email"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;Phone&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="tel" name="tel"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;City&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" name="city"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;State&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;select name="state"&gt;
                          &lt;option value="" disabled="" class=""&gt;Select your state&lt;/option&gt;
                          &lt;option value="0"&gt;Alabama&lt;/option&gt;
                          &lt;option value="1"&gt;Alaska&lt;/option&gt;
                          &lt;option value="2"&gt;Arizona&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;How did you hear about us?&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;textarea placeholder="Let us know the article, website, event, or person that led you here." name="messag"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  
      &lt;!-- Finished! --&gt;
      &lt;div class="modal-body text-center pricingSubmitted"&gt;
          &lt;h4&gt;Thank you. We will contact you shortly.&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a class="btn" id="closeModal"&gt;Close&lt;/a&gt;
          &lt;button class="btn btn-success" type="submit" value="Submit"&gt;&lt;span&gt;Send&lt;span class="pricingSending"&gt;ing&lt;/span&gt; &lt;i class="icon-refresh icon-spin pricingSending"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>