JQuery在单击按钮时显示上一条消息

我曾尝试编写一些jQuery，一旦单击按钮，它就会轮询服务器，一旦操作完成，它就会在网页上显示消息

此部分按预期工作，单击按钮后，将显示微调器，轮询将显示发送的电子邮件数。发送完所有电子邮件后，它会显示正确的消息，显示发送的电子邮件数量，如果有，则显示发送失败的电子邮件数量

问题是，如果我再次单击该按钮，即使轮询现在正在运行并且没有消失，也会显示上一条消息，微调器也不会出现

有人能帮忙解决这个问题吗

因为我不知道为什么会这样

---

尝试将单击事件与窗体分离。在HTML中创建submit按钮并修改jQuery代码，如下所示：

HTML

jQuery：

---

像@SahilSharma一样，您应该将此事件附加到按钮上。但是，您的问题是正常的，因为每次单击回调时也会被触发

如果触发了单击且该布尔值为false，则必须在开始时声明一个布尔值false：将其设置为true。当ajax完成时，将其设置回false

// the boolean
var clicked = false;

$('#btnSendMailingList').on("click", function (event) {
  if(!clicked){
    clicked = true;
    $("#spinner").show();
    $("#progressSend").html("");
    $("#progressSend").empty();
    doPoll();
    event.preventDefault();
    jQuery.ajax({
        type: "POST",
        url: $(form).attr("action"),
        data: $(form).serialize(),
        dataType: "json",
        cache: false,
        async: true,
        processData: false,
        success: function(result) {
            $("#spinner").hide();
            $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
            clearTimeout(doPoll);
        },
        error: function(err) {
            $("#spinner").hide();
            clearTimeout(doPoll);
        },
        complete: function(){
          clicked = false;
        }
     }
    });
});

---

为什么要在整个表单$form.onclick、函数事件{}上添加单击功能。尝试将其重构为一个按钮，然后查看其区别。嘿，为什么要在表单上放置一个单击事件？@Sahil Sharma我已经尝试过了，如果上一条消息出现了相同的问题，那么表单上的单击事件是因为将其放置在按钮上从未起作用，它只是显示了上一条消息。我已经添加了一个答案。也许它能帮上忙。谢谢GameTag，看来点击的bool帮我解决了这个问题

<input type="button" value="Submit Form" id="btnSendMailingList"/>

$(document).ready(function () {
    $("#spinner").hide();
    function doPoll() {
        $("#progressSend").html("");
        $("#progressSend").empty();
        $("#spinner").show();
        $.post("/pathtopolling", function (data) {
            if (data.startsWith("Completed")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "1</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else if (data.startsWith("Unable")) {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "2</p>");
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
            else {
                $("#progressSend").html("");
                $("#progressSend").html("<p class=\"text-info\">" + data + "3</p>");
                setTimeout(doPoll, 500);
            }

        });

    }
    //var form = $("#frmSendMailingList"); Commented for fixation

    $('btnSendMailingList').on("click", function (event) {
        $("#spinner").show();
        $("#progressSend").html("");
        $("#progressSend").empty();
        doPoll();
        event.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: $(form).attr("action"),
            data: $(form).serialize(),
            dataType: "json",
            cache: false,
            async: true,
            processData: false,
            success: function(result) {
                $("#spinner").hide();
                $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
                clearTimeout(doPoll);
            },
            error: function(err) {
                $("#spinner").hide();
                clearTimeout(doPoll);
            }
        });
    });

            $("#btnMailingListReset").click(function () {
                location.reload(true);
                clearTimeout(doPoll);
            });
}).

// the boolean
var clicked = false;

$('#btnSendMailingList').on("click", function (event) {
  if(!clicked){
    clicked = true;
    $("#spinner").show();
    $("#progressSend").html("");
    $("#progressSend").empty();
    doPoll();
    event.preventDefault();
    jQuery.ajax({
        type: "POST",
        url: $(form).attr("action"),
        data: $(form).serialize(),
        dataType: "json",
        cache: false,
        async: true,
        processData: false,
        success: function(result) {
            $("#spinner").hide();
            $("#progressSend").html("<p class=\"text-info\">" + result + "4</p>");
            clearTimeout(doPoll);
        },
        error: function(err) {
            $("#spinner").hide();
            clearTimeout(doPoll);
        },
        complete: function(){
          clicked = false;
        }
     }
    });
});