title: why would such code cause duplicate form submitting?
body: <p>I want to use ajax to submit my form and here is my php code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset='utf-8'&gt;
          &lt;script type='text/javascript' src="./js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(function(){
                  $("button#submitButton").click(function(e){
                      var frm = $("#testForm");
                      frm.submit(function(ev){
                          var smt = $("#submitButton");
                          $.ajax({
                              type : frm.attr('method'),
                              url : frm.attr('action'),
                              data : frm.serialize(),
                              success : function(d){
                                  alert(d);
                              }
                          });
                          ev.preventDefault();
                      });
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id='testForm' action='process.php' method = 'post'&gt;
              &lt;label for='test1'&gt;test1&lt;/label&gt;
              &lt;input name='test1' id='test1'&gt;&lt;/input&gt;
              &lt;button id='submitButton'&gt;submit&lt;/button&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when I clicked the button for the first time, it worked well, expected messages were alerted, however, if I click the button again, the message would be alerted twice, and if I click the button a third time, message would be alerted three times. Why would it behaves so?</p>