连续的AJAX调用会添加额外的连续调用

Question

我有一个非常标准的ajax调用实时更新，但是，我说我称之为ajax，一切都很好，但是我想再次调用它，这次，我会得到 2次调用，如果我再试一次，那么我将有3个，我可以通过调用和警告以及Chrome的网络DevCon验证这一点，任何想法为什么会发生这种情况？

P.S：我正在使用Laravel 5.1

$('button[name=act]').click(function() {
    var icon = $(this).closest('div.thumbnail').find('i');

    $(document).ajaxStart(function() {
        icon.show();
    });

    $("form").submit(function (e) {

        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: "ajax/acttdb",
            data: formData,
            dataType: "json",
            type: "POST",
            cache: false,
            contentType: false,
            processData: false,
            success: function (data, status, jqXhr) {
                $(icon).fadeIn(function() {
                    $(this).removeClass('fa-spinner fa-spin').addClass('fa-check text-success').fadeOut(1000, function() {
                        $(this).removeClass('fa-check text-success').addClass('fa-spinner fa-spin');
                    });
                });
            }/*,
               error: function (jqXhr, textStatus, errorThrown) {
               console.log("Error response:", jqXhr.responseText);
               }*/
        });
    });
});

Answer 1

问题在于，每次点击personInfo按钮，您都会拨打act提交$("form").submit(), which adds another行动“按钮3次，然后点击表单的提交按钮，它将发送3个AJAX请求。

将一个事件处理程序绑定到另一个事件处理程序中几乎总是错误的，你应该绑定顶层的所有事件处理程序。

handler to the form. So if you click on the

Answer 2

发生这种情况的原因是因为每次单击按钮时都会重新绑定提交事件函数，从而导致函数的多个副本。只需将其移出点击即可，如果你想强制点击提交，你可以调用submit（）函数，不带参数来激活事件。

尝试以下方法：

$(function(){
    $('button[name=act]').click(function(){
        var icon = $(this).closest('div.thumbnail').find('i');

        $(document).ajaxStart(function()
        {
            icon.show();
        });

        $("form").submit(); //This submits the form on click
    });

    //This binds the function, so it should only be called once.
    $("form").submit(function (e)
    {
        e.preventDefault();

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: "ajax/acttdb",
            data: formData,
            dataType: "json",
            type: "POST",
            cache: false,
            contentType: false,
            processData: false,
            success: function (data, status, jqXhr)
            {
                //BLAH
            }
        });
    });
});

我注意到你可能想要解决的其他两件事。您希望以某种方式在加载后更新图标。您需要使用其他方法在成功函数中找到图标（可能查看返回的数据可能会产生一些有用的信息。因为它是json，所以应该很容易更新。）

此外，您当前拥有它的方式将绑定到页面上的所有表单。如果页面上有多个表单，您可能希望更改选择器以使用id。

希望这有帮助！

Answer 3

基于增量调用和我的猜测，我不得不说每次进行（ajax）调用时都会打印此代码，导致在每次调用时再次绑定form元素。 我是对的吗？

JO。