jQuery Ajax Response works only once until page refresh

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

  }

});