Question

我有一个表单，我通过Ajax / jQuery拦截。这里的问题是，如果某些字段未填写，我会将textStatus中的错误显示为错误div。我的函数然后完全删除div并在删除原始div之后重新插入一个空的div（再次显示div以显示错误）。会发生的情况是，如果我多次提交表单，新的错误div将在dom中多次插入，错误将在原始错误div中立即显示三次。我当然只需要一个错误div和一组错误来显示。我的脚本如下：

jQuery(function ($) {
    $(document).ready(function () {

        $("#AddModel").on("submit", function (e) {

            var SubmitButton = $("#AddBtn");

            SubmitButton.blur();

            var form = $(this);

            var postData = new FormData($("#AddModel")[0]);

            var errors = $('#errors');

            var theForm = $('#theForm');

            var divAlert = "<div id=\"errors\">AAA<\/div>";

            $.ajax({
                type: 'POST',
                url: form.prop('action'),
                processData: false,
                contentType: false,
                data: postData,
                success: function (data) {

                    console.log(data);

                },

                error: function (textStatus) {

                    var json = JSON.parse(textStatus.responseText);

                    $.each(json, function (key, value) {

                        var errorVar = "";
                        errorVar += "<div id=\"error\" class=\"col-lg-6 alert alert-danger\">";
                        errorVar += "" + value + "";
                        errorVar += "<a class=\"close\" data-dismiss=\"alert\">×<\/a>";
                        errorVar += "<\/div>";

                        errors.append(errorVar);

                    });

                    if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }

                }

            });
            e.preventDefault();
        });
    });
});

例如，在初始阶段，我将在页面中出现这种情况：

<div id="errors"></div>

如果我在结尾处连续按下提交按钮3次，在显示错误并删除div之后我会在页面中看到这种情况：

<div id="errors"></div>
<div id="errors"></div>
<div id="errors"></div>

在插入这三个元素之前发生的事情是：

<div id="errors" style="display: none;">

我想这是在剧本的fadeOut(350)部分。

我想要实现的是如果按下按钮然后等待脚本完成，然后再次提交。我不喜欢超时选项，因为我不知道浏览器将花多少时间显示错误，然后删除并重新插入错误div。那么如何在脚本的这一部分结束之前禁用后续提交？ - ＆GT;

if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }

Answer 1

您可以通过在开启（＆＃39;提交＆＃39;）功能之前声明变量来跟踪脚本进度，并使用它来限制提交：

jQuery(function ($) {
  $(document).ready(function () {

    var isEnded=true;
    $("#AddModel").on("submit", function (e) {

      if(isEnded){
        isEnded=false;
         .... YOUR CODE
      }

    });
  });
});

当您的特定代码部分结束时，只需添加：

isEnded=true;

jquery：阻止重新提交表单，直到第一个事件完成

1 个答案: