JQuery .hide() 函数不会在 chrome 和 Internet Explorer 中立即触发。在 Firefox 中运行良好

Question

我有一个包含表单的页面

一旦用户提交表单，我希望按钮消失，并显示带有微调器 gif 的 div 和正在验证的消息

所以我有：

function submit_application(input){



    $('#create_account_button').hide();
    $('#create_account_validating').show();


    var form = $(input).parents('form:first');
    var form_id = ($(form).attr('id'));
    var valid = validate_form(form_id);

    if(valid){
        $('#'+form_id).submit();
    }


}

在我的表单提交按钮上我有：

onclick="submit_application(this);return false"

validate_form 循环遍历每个输入并验证语法等。

这需要几秒钟的时间，因为有对服务器的 ajax 调用来验证某些字段，因此需要使用微调器 gif 'validating now' div

在 Firefox 中一切正常，但在 Internet Explorer 和 chrome 中，按钮似乎永远不会消失

我做了一些故障排除并意识到正在发生的事情是那些浏览器在隐藏和显示相关 div 之前验证表单..

奇怪的行为，有什么想法吗？

Answer 1

尝试将验证包装在延迟函数中，如下所示...

function submit_application(input){
    $('#create_account_button').hide();
    $('#create_account_validating').show();

    setTimeout(function() {
        var form = $(input).parents('form:first');
        var form_id = ($(form).attr('id'));
        var valid = validate_form(form_id);

        if(valid){
            $('#'+form_id).submit();
        }
    }, 250);
}

我不知道你的代码为什么按照你描述的那样做，但这应该可以解决问题。

Answer 2

尝试使用 jQuery 的提交处理程序：http://api.jquery.com/submit/

$('#myform').submit(function() {
    $('#create_account_button').hide();
    $('#create_account_validating').show();

    var valid = validate_form('myform');
    if(valid)
        $(this).submit();
    else
        return false;
}

Answer 3

使用回调？

function submit_application(input){    

    $('#create_account_button').hide(0, '', function(){

        $('#create_account_validating').show(0, '', function(){
            var form = $(input).parents('form:first');
            var form_id = ($(form).attr('id'));
            var valid = validate_form(form_id);

            if(valid){
                $('#'+form_id).submit();
            }
        });
    });
}