在提交表单时显示div，可在Chrome，FF，IE中使用，但不能在Safari中使用 [英] show div upon form submit, works in Chrome, FF, IE but not Safari

问题描述

不知道该去哪里.

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

I have a form, which when submitted, I would like to display a "processing, please wait" message. (The form has photos to upload so might take a while)

我有以下jQuery

I have the following jQuery

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

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

addnews is my form id, and the div in my template is

<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无法动画，但我知道那是一个单独的问题)

Now this is working when I hit Submit in FF(Mac), Chrome(Mac&PC) and IE9(although the gif does not animate, but I know thats a separate issue)

，但它似乎不想在Mac上的Safari上运行. 有什么想法，如果我有什么可以阻止它?或调试它的最佳方法是什么? 谢谢！

but it does not seem to want to work on Safari on the mac. Any ideas, if theres something in what I have thats stopping it? Or what the best way to debug it is? Thanks!

推荐答案

这对我有用.真的不知道为什么，但是Safari可能需要稍作休息才能在提交之前真正显示它:)提交似乎停止了页面上的某些事件.动画GIF在Safari和IE上提交时会冻结，但在Chrome和FF中，它们仍会在提交过程中滚动.

This worked for me. Don't really know why, but maybe Safari needs a little break to really show it before submit :) Submit seems to halt some events on page. Animated GIFs freeze on submit on Safari and IE but in Chrome and FF they still roll during submit process.

$(document).ready(function() {
    $('#addnews').submit(function() {
        setTimeout(gogo,1);    
    });
});

function gogo() {
    $('#loading').show();
}

这篇关于在提交表单时显示div，可在Chrome，FF，IE中使用，但不能在Safari中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！