jQuery Ajax 在页面刷新之前响应只工作一次

Question

This is simple subscriber form submit with jQuery Ajax, everything is working fine but alert response show only one time until page refresh.

Here is my view code:

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

How can I fix this issue?

Answer 1

This is happening because you are using fadeout function. Once fadeout happens display becomes none. And it will only works when you refresh the page.

You can use below code

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();

  }

});