Почему такой код вызывает дублирование формы?

Я хочу использовать Ajax, чтобы представить свою форму и вот мой PHP код:Почему такой код вызывает дублирование формы?

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <script type='text/javascript' src="./js/jquery.min.js"></script> 
     <script> 
      $(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(); 
        }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form id='testForm' action='process.php' method = 'post'> 
      <label for='test1'>test1</label> 
      <input name='test1' id='test1'></input> 
      <button id='submitButton'>submit</button> 
     </form> 
    </body> 
</html>

, когда я нажал на кнопку в первый раз, он работал хорошо, ожидаемые сообщения были предупреждены, однако, если я нажимаю еще раз, сообщение будет предупреждено дважды, и если я нажму кнопку в третий раз, сообщение будет предупреждено три раза. Почему он так себя ведет?

источник

2015-02-16 Alaya

В вашем случае каждый раз, когда нажимается кнопка, в форму добавляется новый обработчик отправки формы, поэтому, когда кнопка нажата второй раз, в форму добавляются 2 обработчика отправки, так что выполняется код ajax 2 раз, при следующем нажатии регистрируются 3 обработчика, так что ajax будет выполняться 3 раза.

Так как кнопка находится в форме, щелчок по ней вызовет отправку формы по умолчанию, чтобы вы могли напрямую зарегистрировать форму submit handler.

$(function() { 
    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(); 
    }); 
});

источник

2015-02-16 10:10:26

Почему такой код вызывает дублирование формы?

ответ

Смежные вопросы