jquery - 在表单提交上显示 div，适用于 Chrome、FFIE，但不适用于 Safari

Question

不知道该去哪里。

我有一个表单，提交后我想显示一条“正在处理，请稍候”消息。 (该表格有照片需要上传，因此可能需要一段时间)

我有以下 jQuery

$(document).ready(function() {
    $('#addnews').submit(function() {
        $('#loading').show();
    });
});

addnews 是我的表单 ID， 我的模板中的 div 是

<div id="loading">Please wait, your news is being submitted...
    <img src="/-/images/addwalk-loader.gif"/>
</div>

使用这个CSS

#loading{
    display:block;
    display: none;
    background:#399f8a;
    color:#FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding:10px;
    margin-top: 10px;
}

.loading img{
    float: right;
}

现在，当我在 FF(Mac)、Chrome(Mac&PC) 和 IE9 中点击“提交”时，此功能就可以工作了(虽然 gif 没有动画，但我知道这是一个单独的问题)

但它似乎不想在 Mac 上的 Safari 上运行。 有什么想法吗，如果我有什么东西可以阻止它？或者调试它的最佳方法是什么？ 谢谢!

Answer 1

我遇到过非常类似的问题，在提交付款表单时，我们显示了一个加载弹出窗口，该弹出窗口覆盖了整个屏幕，以尝试阻止人们重新加载页面并重新提交(如果他们认为花费的时间太长)。然而在 Safari 中，加载程序似乎从未出现。

在观察控制台寻找线索后，我意识到所有 css 更改都在发生并应用到页面，但我根本没有看到这些反射(reflect)在屏幕上。

我得出的结论是，这是由于 safari 在页面加载期间处理内容渲染的方式造成的。一旦页面加载被触发(即从链接或表单提交)，safari 就会停止对显示进行任何进一步的更改。

这意味着您需要在触发提交之前让加载动画就位。将这种想法应用到我自己的代码中解决了问题。

对你来说这意味着这样的事情......

$(document).ready(function() {
    $('#addnews').submit(function(e) {
        e.preventDefault();
        $('#loading').show();
        $(this).submit();
    });
});

然而，这引发了另一个问题，因为提交是触发事件，而我们想要触发的事件我们创建了一个无限循环，由于我们阻止了默认值，因此永远不会提交。

要解决此问题，您要么不需要触发提交中的所有内容，要么我们可以执行类似的操作...

$(document).ready(function() {
    $('#addnews').each(function(){
        this.preventNextSubmit = true;            
    }).submit(function(e) {
        if(this.preventNextSubmit == true){
            this.preventNextSubmit = false;
            e.preventDefault();
            $('#loading').show();
            $(this).submit();
        }
    });
});

此示例最初将 bool 值添加到设置为 true 的表单中。如果为真，它会抑制表单提交并显示动画，然后它会重置 bool 值并再次调用提交，现在将正常提交。

我希望这有帮助:)