jQuery Ajax响应只工作一次，直到页面刷新

Question

这是一个简单的订阅表单提交与jQuery Ajax，一切都很好，但警报响应只显示一次，直到页面刷新。

下面是我的视图代码:

$(document).ready(function () {
$("#ssubmit").click(function (e) {
e.preventDefault();

let subscriber = $("#subscriber").val()
subscriberdata = {subscriber: subscriber,}

$.ajax({
type: "POST",
url: "form-process.php",
data: JSON.stringify(subscriberdata),
success: function (response) {
subscribersucess = "<div class='alert alert-success text-center mt-3'>" + response + "</div>";
$("#alerts").html(subscribersucess);

setTimeout(function(){
$('#alerts').fadeOut("slow");
},5000)

$("#subscriberform")[0].reset();
}
});

})
});

如何解决这个问题?

Answer 1

这是因为您正在使用淡出功能。一旦淡出发生，显示变为none。只有当你刷新页面时，它才会起作用。

可以使用下面的代码

let subscriber = $("#subscriber").val()
subscriberdata = {subscriber: subscriber,}
$.ajax({
type: "POST",
url: "form-process.php",
data: JSON.stringify(subscriberdata),
success: function (response) {
subscribersucess = "<div class='alert alert-success text-center mt-3'>" + response + "</div>";
$('#alerts').show().html();
$("#alerts").html(subscribersucess);    
$('#alerts').delay(5000).fadeOut(); 


$("#subscriberform")[0].reset();
}
});