在 preventDefault() 后恢复提交过程答案

【问题标题】：Resume in submit process after preventDefault()在 preventDefault() 后恢复提交过程
【发布时间】：2014-02-13 14:21:44
【问题描述】：

我在 jquery 中的 preventDefualt 函数后提交有问题。我想在单击提交按钮后显示一个 div，10 秒后我想隐藏它并继续提交表单。我阅读了许多类似问题的答案，但我无法得到正确的解决方案。这是一个代码：

$('#form').submit(function(e) {
     e.preventDefault(e);
     showPopup();

     $(this).unbind('submit').submit();
});

var showPopup = function() {
     $('#popup').fadeIn('slow');
     setTimeout(function() { hidePopup(); }, 10000 );
     return true;   
}

var hidePopup = function() {
     $('#popup').fadeOut('slow');
     return true;    
}

谢谢:)

【问题讨论】：

标签： jquery submit preventdefault

【解决方案1】：

工作示例：JSFiddle

您可以使用 setTimeout() 来实现，并使用 jquery 手动发布表单。您还需要检查这是否是第一个带有标志的提交（取消绑定 onsubmit 也可以）。

var allowSubmit = 0;
$('#form').submit(function(e) {
     if(!allowSubmit) 
     {
         e.preventDefault();
         showPopup();
         setTimeout("$('#form').submit();",10000);
         allowSubmit = 1
     }
});

var showPopup = function() {
     $('#popup').fadeIn('slow');
     setTimeout(function() { hidePopup(); }, 10000 );
     return true;   
}

var hidePopup = function() {
     $('#popup').fadeOut('slow');
     return true;    
}

【讨论】：

setTimeout 不会阻止。执行将立即继续到下一行并在 10 秒超时之前提交表单。
添加了return false; 以确保按钮不会提交表单。
e.preventDefault() 已经这样做了。返回 false 是在您从表单中取消绑定提交处理程序并提交之后，因此不会有任何效果。

【解决方案2】：

setTimeout 是异步的，它不会阻塞。您必须传递表单并在最后调用提交：

$('#form').submit(function (e) {
    e.preventDefault(e);
    showPopup(this);
});

var showPopup = function (form) {
    $('#popup').fadeIn('slow');
    setTimeout(function () {
        hidePopup(form);
    }, 10000);
}

var hidePopup = function (form) {
    $('#popup').fadeOut('slow', function () {
        $(form).unbind('submit').submit();
    });
}

【讨论】：