0

我之前遇到了一个问题，jquery 的 submit() 处理程序被触发了两次。我只用一个基本的提交事件处理程序制作了一个测试文件，它工作正常，但以下代码不起作用：

$(document).ready(function(){
    $('#regForm').submit(function(e){
        e.preventDefault();
        $('#regForm').fadeTo('slow', 0, function(){
            $('#regForm').css('display', 'none');
            $('#mainbox').animate({height: 90}, 100);
            $('#one, #two, #three #four').fadeTo('slow', 0, function(){
                $('#one').html('Processing...').fadeTo(300, 1, function(){
                    $.post("/data/handles/account/register.php", {user: $('#user').val(), pass: $('#pass').val(), passc: $('#passc').val(), email: $('#email').val()}, function(data){
                        if (data.error == 8) {
                            alert('Yes');
                            /*
                            $('#one').html('Processing...' + data.content);
                            $('#two').html('Logging In...').fadeTo('slow', 1, function(){
                                $('#three').html('Redirecting...<a href="/account.php">[Manual]</a>').fadeTo('slow', 1, function(){
                                    setTimeout(redirect, 1000);
                                });
                            });
                            */
                        } else {
                            alert('No');
                            /*
                            $('#one').html(data.content);
                            $('#two').html('<a href="#" reset>Retry</a>').fadeTo('slow', 1);
                            */
                        }
                    }, "json");
                });
            });
        });
    });
});

当我测试此代码时，如果我正确输入所有内容并从 php 文件在数据库中创建 2 个 mysql 条目，它会两次警告“是”。我查找了与此问题相关的其他问题，但没有解决此问题，所以我想知道我是否在这里做错了什么，或者是否有某种方法可以解决它。谢谢您的帮助。

4

1 回答 1

1

问题出在这一行：

$('#one, #two, #three #four').fadeTo('slow', 0, function(){

你将fateTo附加到3个元素，如果你在#three之后加上另一个“，”，则为4。所以，在每次fadeTo jQuery 之后都会调用你的post 提交的回调函数()。您可以创建一个计数以等待所有淡入淡出完成或更改您的逻辑以仅在“一个”回调中提交。

这是一个示例：

var count = 0; // count of elements that already finished the fadeTo
var limit = 2; // number of elements that have to wait the fadeTo
$('#regForm').submit(function (e) {
    e.preventDefault();
    $('#regForm').fadeTo('slow', 0, function () {
        $('#regForm').css('display', 'none');
        $('#mainbox').animate({
            height: 90
        }, 100);
        count = 0;
        $('#one, #two, #three #four').fadeTo('slow', 0, function () {
            fadeToSubmit();

        });
    });
});

function fadeToSubmit(){
    count++;
    if(count == limit){
            $('#one').html('Processing...').fadeTo(300, 1, function () {
                $.post("/data/handles/account/register.php", {
                    user: $('#user').val(),
                    pass: $('#pass').val(),
                    passc: $('#passc').val(),
                    email: $('#email').val()
                }, function (data) {
                    if (data.error == 8) {
                        alert('Yes');

                    } else {
                        alert('No');

                    }
                }, "json");
            });
    }
}
于 2013-05-04T16:21:04.730 回答