Question

我尝试做一些事情，除了少数例外情况之外......我有一个通过$.ajax()发送数据的表单，但有时表单会将数据发送两次或三次......

代码是：

$('div#feedBackPresta-image, div#feedBackPresta-fb').click(function() {
    $('div#bgLayer').css({
        'height': bodyHeight,
        'display': 'block'
    });
    $('div#feedBack').css('display', 'block');
});
$('a#addFeedBack').click(function() {
    $('div#feedBacks').css('display', 'none');
    $('h3#clientsAboutUs').css('display', 'none');
    $('h3#addFeedBackAboutUs').css('display', 'inline-block');
    $('div.pages').css('display', 'none');
    $('div#feedBackForm').css('display', 'block');
    $('a#showFeedBacks').css('font-weight', 'normal');
    $('a#addFeedBack').css('font-weight', 'bold');
    $('input#submitFeedBack').attr('disabled', 'disabled');
    var clientName = $('input#clientName').val();
    var clientEmail = $('input#clientEmail').val();
    var clientWebsite = $('input#clientWebsite').val();
    var clientImage = $('input#clientImage').val();
    var clientFeedBack = $('textarea#clientFeedBack').val();
    var error = false;
    $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').focusin(function() {
        $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').keyup(function() {
            if($('input#clientName').val().length < 6) {
                $('input#clientName').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('input#clientName').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if($('input#clientEmail').val().length < 10) {
                $('input#clientEmail').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('input#clientEmail').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if($('textarea#clientFeedBack').val().length < 20) {
                $('textarea#clientFeedBack').css('border', '1px solid #ff0000');
                error = true;
            }
            else {
                $('textarea#clientFeedBack').css('border', '1px solid #BDC2C9');
                error = false;
            }
            if(error == false) {
                $('input#submitFeedBack').removeAttr('disabled');
            }
            else {
                $('input#submitFeedBack').attr('disabled', 'disabled');
            }
        });
    });
    $('input#submitFeedBack').click(function() {
        clientName = $('input#clientName').val();
        clientEmail = $('input#clientEmail').val();
        clientWebsite = $('input#clientWebsite').val();
        clientImage = $('input#clientImage').val();
        clientFeedBack = $('textarea#clientFeedBack').val();
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(clientEmail != "" || clientEmail != undefined) {
            if(!emailReg.test(clientEmail)) {
                $('input#clientEmail').css('border', '1px solid #ff0000');
                error = true;
            } 
        }
        if(error == false) {
            $.ajax({
                type: 'POST',
                url: 'modules/feedBackPresta/ajax.php',
                data: {'type': 'add', 'clientName': clientName, 'clientEmail': clientEmail, 'clientFeedBack': clientFeedBack, 'clientWebsite': clientWebsite, 'clientImage': clientImage},
                success: function() {
                    $('input#submitFeedBack').attr('disabled', 'disabled');
                    $('input#clientName').val('').css('border', '1px solid #BDC2C9');
                    $('input#clientEmail').val('').css('border', '1px solid #BDC2C9');
                    $('input#clientWebsite').val('');
                    $('input#clientImage').val('');
                    $('textarea#clientFeedBack').val('').css('border', '1px solid #BDC2C9');
                    $('div#successAdd').append('<div class="feedBack-approve" style="text-align: center;"><p style="margin-top: 15px;">Successful!</p></div>');
                    $('div.feedBack-approve').fadeOut(2500);
                }
            });
        }
    });
});
$('a#showFeedBacks').click(function() {
    $('div#feedBackForm').css('display', 'none');
    $('h3#clientsAboutUs').css('display', 'inline-block');
    $('h3#addFeedBackAboutUs').css('display', 'none');
    $('div.pages').css('display', 'block');
    $('div#feedBacks').css('display', 'block');
    $('a#addFeedBack').css('font-weight', 'normal');
    $('a#showFeedBacks').css('font-weight', 'bold');
});
$('div#bgLayer, div#feedBackRight').click(function() {
    $('div#bgLayer').css('display', 'none');
    $('div#feedBack').css('display', 'none');
    $('div#feedBacks').css('display', 'block');
    $('div#feedBackForm').css('display', 'none');
    $('a#showFeedBacks').css('font-weight', 'bold');
    $('h3#clientsAboutUs').css('display', 'inline-block');
    $('h3#addFeedBackAboutUs').css('display', 'none');
    $('div.pages').css('display', 'block');
    $('a#addFeedBack').css('font-weight', 'normal');
    window.location.hash = '!';
});
$('a.anchors').click(function() {
    $('div#bgLayer').css('display', 'none');
    $('div#feedBack').css('display', 'none'); 
});

所以，如果有人能帮我解决这个问题，我将非常感激......

祝你好运，乔治！

Answer 1

每次处理a#addFeedBack点击事件时，您都会将新的点击处理程序附加到提交表单的input#submitFeedBack。您应该只将点击处理程序附加到input#submitFeedBack一次。

Answer 2

您正在其他事件处理程序中设置事件处理程序，如下面的代码缩写所示：

$('a#addFeedBack').click(function() {
    ...
    $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').focusin(function() {
        $('input#clientName, input#clientEmail, input#clientWebsite, input#clientImage, textarea#clientFeedBack').keyup(function() {
            ...
        });
    });
    $('input#submitFeedBack').click(function() {
        ...
        if(error == false) {
            $.ajax({
              ...
            });
        }
    });
});

这意味着每次单击“#addFeedback”时，它会向“#submitFeeback”按钮添加另一个.click处理程序，并为输入和textarea添加另一个.focusin处理程序，并且每次实际执行重点关注那些输入字段，它会添加另一个.keyup处理程序（乘以现有的焦点处理程序数）。

这些重复的事件处理程序将在事件发生时全部运行，因此您的$.ajax()调用将多次进行。

删除嵌套的事件绑定（在同一级别执行所有绑定，以便只绑定每个事件一次）。

Answer 3

需要筛选很多代码，所以我不得不承认我会在这里猜测：

如果它多次提交，那是因为您多次绑定点击处理程序。使用.click()方法进行绑定时，这有时会带来危险。尝试使用.on()函数进行事件绑定调查，使用委托语法委派对最近祖先的监听（可能是父级，但可能更高）。

您将能够更好地整理活动，并且您不需要尝试重新绑定来自其他地方的点击。

[奖金]

不是直接回答你的问题，而是一些一般的建议：GOT是一种更有效地进行所有视觉变化的方法。将某些元素组合在一起然后仅隐藏父元素...在适当的地方使用.toggleClass() ...甚至通常添加或删除类而不是直接修改样式。似乎还有很多空间来缓存jQuery对象，有时因为它们被多次使用，有时只是为了使代码更具可读性。

我也担心它如此ID很重。对于这项任务，这可能是正确的方法，谁知道。但一般来说，如果你可以重用类，然后也使用DOM遍历（而不是隐藏＆＃34;＃someID＆＃34;它总是一个子元素，你可以隐藏使用$(this).find('.someClass')以便相同代码可以解决重复的模式。

Answer 4

通过.submit()事件而不是jQuery中的.click()事件提交表单可能有助于避免这种情况。您的代码应该大致相同，只需将return false添加到.click()方法的底部并将其重命名为.submit()

Answer 5

您绑定了包含ajax的点击处理程序

$('input#submitFeedBack').click(function() {
    ...
});

在您的其他点击处理程序

中

$('a#addFeedBack').click(function() {
    ...
});

每次点击#addFeedBack时，都会有另一个点击处理程序附加到#submitFeedBack。

使用jQuery Ajax函数，有时我的数据发送两次或三次

5 个答案: