Question

我有一个包含两个表单的页面，两个表单都有唯一的ID。当提交任何一个表单时，我需要使页面淡出。但是，它不起作用。

这是代码

$(document).ready(function(){
        $('#container').fadeOut(0);
        $('#container').fadeIn(500);
    });

    $('form').submit(function(){
        alert("Hello.");
        $('#container').fadeOut(500);
    });

正如您从代码中看到的那样，它应该显示一个警报，但它不显示，它甚至不会淡出页面。我的表单包含一个文本输入（设置为只读）和一个提交按钮。

提前致谢。

Answer 1

试试这个：

$(document).ready(function(){
    $('#container').fadeOut(0);
    $('#container').fadeIn(500);

    $('form').submit(function(e){
        e.preventDefault();
        var form = this;
        $('#container').fadeOut(500, function() { 
            form.submit();
        });       
    });
});

提交绑定在文档之外就已准备就绪，在执行时可能无法找到表单标记。

jsfiddle example - http://jsfiddle.net/KbaG3/

Answer 2

您可能应该将提交事件寄存器功能移动到文档就绪函数内部，以便在注册函数之前确保DOM已准备就绪。

如果这没有帮助，请查看页面上是否存在任何可能会暂停执行的javascript错误。

Answer 3

除非您在页面底部包含此JS，否则应将$(form)....代码移到$(document).ready()块

中

$(document).ready(function(){
        $('#container').fadeOut(0);
        $('#container').fadeIn(500);


    $('form').submit(function(){
        alert("Hello.");
        $('#container').fadeOut(500);
    });
});

这是因为当您将事件绑定到它时，您的元素不存在

Answer 4

尝试：

jQuery(function($){
    $('#container').hide().fadeIn(500);

    $('form').submit(function(){
        alert("Hello.");
        $('#container').fadeOut(500);
    });
});

我认为这是一个更清晰的代码，也没有冲突证据。

无论如何，jQuery .submit（）都不会执行

4 个答案: