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)应该是事件处理程序中的首选。

jQuery fadeOut然后提交（）

1 个答案: