title: jQuery preventdefault submit form doesn't work when submitting form through js function?
body: <p>I have this basic form: </p>
  
  <pre><code>&lt;form id="myForm" name="myForm" action="index.php" method="post"&gt;
      &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then my jQuery to attach submit event:</p>
  
  <pre><code>$( document ).ready(function() {
      var frm = $('#myForm');
      frm.submit(function (ev) {
          ev.preventDefault();
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: frm.serialize(),
              success: function (data) {
                  alert('ok');
              }
          });
      });
  });
  </code></pre>
  
  <p>When I press the submit button it works fine, I get the alert 'ok'. </p>
  
  <p>But if I change the submit button to an actual button then add an onclick function through javascript, like this:</p>
  
  <pre><code>&lt;input type="button" value="Submit" onclick="submitF(this.form);" /&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function submitF(form) {
      form.submit();
  }
  </code></pre>
  
  <p>My jQuery event doesn't trigger, the form submits like it normally would. </p>
  
  <p>If I'm attaching my jQuery function to the form submit event, why doesn't it trigger when javascript submits the form?</p>