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

Question

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

这部分按预期工作，单击按钮后，将显示微调器，并显示显示发送的电子邮件数量的投票。发送完所有电子邮件后，它会显示正确的消息，显示发送的电子邮件数量以及发送失败的电子邮件数量(如果有(。

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

任何人都可以帮助解决此问题吗

因为我不知道为什么会发生这种情况

$(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");
$(form).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);
});
}).

Answer 1

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

你必须在开头声明一个布尔值，如果触发了点击并且这个布尔值是假的：将其设置为 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;
}
}
});
});

Answer 2

尝试将单击事件与表单分开。在HTML中创建一个提交按钮并修改jQuery代码，如下所示：

.HTML

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

j查询：

$(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);
});
}).