title: JQuery submit runs multiple times after first submit
body: <p>I have written a JQuery function to handle form submits that I use all over my site</p>
  <p>My function is as follows:</p>
  <pre><code>$('.ajax_form').submit(function(e) {
      alert(&quot;submit&quot;);
      e.preventDefault();
      
      var frm = $(this);
      var modal = $(this).data(&quot;modal&quot;) || 'yes';
      
      if(!check_required( $(this) )) {
          alert(&quot;Some required fields are empty&quot;);
      } else {
          LoadModalBody('&lt;h2 id=&quot;headingLoading&quot; align=&quot;center&quot;&gt;Loading...&lt;/h3&gt;&lt;p align=&quot;center&quot;&gt;&lt;i class=&quot;fa fa-spinner fa-spin fa-5x&quot;&gt;&lt;/i&gt;&lt;/p&gt;');
          
          var i = 1;
          var sampleMessages = [
              &quot;Still Loading...&quot;,
              &quot;This is taking longer than normal, but we're working on it...&quot;
          ];
          setInterval(function() {
            var newText = sampleMessages[i++ % sampleMessages.length];
            $(&quot;#headingLoading&quot;).fadeOut(500, function () {
              $(this).text(newText).fadeIn(500);
            });
          }, 10 * 1000);
          
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: frm.serialize(),
              success: function (data) {
                  CloseModal();
                  
                  if(modal === &quot;no&quot;) {
                      $('.alert').remove();
                      /*var m = '&lt;div class=&quot;alert alert-success&quot;&gt;';
                      m += '&lt;p&gt;&lt;i class=&quot;icon fa fa-check&quot;&gt;&lt;/i&gt; ' + data + '&lt;/p&gt;';
                      m += '&lt;/div&gt;';*/
                      $( data ).insertBefore( frm );
                      window.scrollTo(0,0);
                  } else {
                      LoadModalBody(data);
                  }
              },
              error: function (data) {
                  //alert(&quot;There was an error&quot;);
                  //console.log('An error occurred.');
                  //console.log(data);
              },
          });
      }
  });
  </code></pre>
  <p>I added the alert at the top of the submit for testing.</p>
  <p>If the form is submitted once, you get the alert and then on the second submit the function is running 3 times and I cannot work out what is causing it.</p>
  <p>I've tried adding <code>return false;</code> at the end of the <code>$('.ajax_form').submit(function(e) {</code> and also after the <code>$.ajax({</code> block.</p>
  <p><code>e.preventDefault();</code> is also in there at the top of the function which doesn't seem to stop it.</p>
  <p><a href="https://jsfiddle.net/pv0dbsLz/" rel="nofollow noreferrer">https://jsfiddle.net/pv0dbsLz/</a></p>