Question

我正试图让这件事发生：

阻止提交按钮提交表单
淡出元素
然后提交表格

但我陷入了无限的动画循环！为什么？

HTML

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

的JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

P.S.-我也尝试了.one()方法而不是.submit()，但是一旦动画完成，它就会阻止在#postitron上执行提交方法:(

Answer 1

submit()会调用您的自定义绑定submit功能，该功能会再次呼叫您的submit等。

尝试使用DOM的提交：

$('#postitron')[0].submit()

Answer 2

这是因为您在SUBMIT上绑定了您的活动，并且您的.animate callback function SUBMIT正在形成...导致无限循环。

试试这个：

不要在.submit上绑定事件form，而是在.click按钮上绑定submit个事件。

$('#submit').click(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

请记住我没有测试过这个。

Answer 3

您可以预先定义该功能，并在其中解除绑定提交，然后重新提交。这是一个黑客，但它可能会有效。

或者你可能会检查它的隐藏性，然后像这样重新提交：

var hidden = false;
$('#postitron').submit(function(e){
    if ( !hidden ) {
        e.preventDefault();
        $('#page').animate({opacity:0},400, function(){
            hidden = true;
            $('#postitron').submit();
        });
    }
});

jQuery在无限循环中动画

3 个答案: