title: Event delegation for submit() event in jQuery
body: <p>I have this in my jQuery code:</p>
  <pre><code>$(this).parents('form').submit();
  </code></pre>
  <p>The problem is that the first time it works without reloading the page but from the second time I call it, the page is reloaded. I was reading <a href="https://stackoverflow.com/questions/25837868/why-does-ajax-work-correctly-on-first-request-but-returns-partial-view-on-new-p">Why does Ajax work correctly on first request, but returns partial view on new page on second request?</a> and it says this:</p>
  <blockquote>
  <p>&quot;works first time only&quot; behaviour is typical of a situation where the content is being added dynamically, but the events were bound directly to elements (e.g. at DOM ready).</p>
  </blockquote>
  <p>I was trying to do something like this to use event delegation for the form <code>submit()</code> event:</p>
  <pre><code>$(document).on('submit', 'form', function(){
      // Something here?
  });
  </code></pre>
  <p>But I am not sure what to put in that <code>function()</code>, since all I need is to submit the form but with AJAX so that the page is not reloaded, pretty much what I can already achieve the first time with <code>$(this).parents('form').submit();</code>. Any ideas?</p>
  <p>UPDATE 1:</p>
  <p>This is the trigger of the select box (the <code>onChange</code> event tries to submit the form):</p>
  <pre><code>$(document).on('change', 'form select.js-admin-index-autosubmit', function() {
      if ($('.js-checkbox-list:checked').val() != 1 &amp;&amp; $(this).val() &gt;= 1) {
          alert(__l('Please select atleast one record!'));
          return false;
      } else if ($(this).val() &gt;= 1) {
          if (window.confirm(__l('Are you sure you want to do this action?'))) {
              $(this).parents('form').submit();
          } else {
              $(this).val('');
          }
      }
  });
  </code></pre>
  <p>When I change the value to choose an action from the select box, I get this message: <code>Are you sure you want to do this action?</code> The first time it does everything with AJAX (submitting the form). But from the second time, it works correctly but it reloads the page. It should do it with AJAX always without reloading the page, not only the first time. This is specifically the line that is executed for submitting the form:</p>
  <pre><code>$(this).parents('form').submit();
  </code></pre>
  <p>I am trying to understand why that same line, it works with AJAX the first time but from the second time it reloads the page.</p>