提交fadeOut，然后提交()

Question

此代码不起作用。淡出效果良好，但不提交表单。怎么啦？

<div id="main_div">
 <form action="#" method="POST">
  <input type="text" name="name"><br>
  <input type="password" name="pass"><br>
  <input type="submit" name="login" value="Login">
 </form>
</div>

$("form").submit(function(event) {
  event.preventDefault();
  $("#main_div").fadeOut(1000, function() {
    $("form").submit();
  });
});

Answer 1

$("form").submit();再次触发您的处理程序，导致无限循环。

试着这样做：

$('form').off('submit', handler).submit();。

演示：

​

$('form').on('submit', function handler(event) {
  event.preventDefault();
  $('#main_div').fadeOut(1000, function() {
    $('form').off('submit', handler).submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div">
 <form action="https://en.wikipedia.org" method="get">
  <input type="text" name="name"><br>
  <input type="password" name="pass"><br>
  <input type="submit" name="login" value="Login">
 </form>
</div>

​

注意:使用form选择器似乎不是一个好主意，在这种情况下，在事件处理程序中应该首选$(this)。