Почему запрос на удаление Ajax работает только один раз на Firefox?

Question

Я использую jQuery Ajax запрос для доступа к сценарию PHP, где я удаляю данные из моей MySql базы данных, как это

 $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php"
  });
  location.reload(true);
});

#del_mon - моя кнопка.

Этот код работает только один раз на Firefox, но не после. Я пробовал это на Chrome (версия 80.0.3987.122) и Edge (версия 80.0.361.62), работает несколько раз на обоих. Firefox версия, которую я использую, - 73.0.1, и она актуальна. Я использую Ajax запрос на добавление и чтение данных из моей базы данных, и это прекрасно работает на Firefox.

. Я не получаю ошибок в своей консоли.

Я пытался найти решение и я изменил свои функции щелчка с этого

$("#del_mon").click(function(e) {});

на этот

$(document).on("click", "#del_mon", function(e) {});

Как показано в этом сообщении стека. Но это не работает для меня.

Answer 1

Повторная загрузка страницы может отменить запрос AJAX, который должен был быть отправлен.

Вы должны выполнить перезагрузку при получении ответа, а не сразу после отправки запроса AJAX.

$(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php",
    success: function() {
      location.reload(true);
    }
  });
});

Answer 2

Вы должны попытаться выполнить действие непосредственно перед тем, как ваш вызов будет выполнен.

 $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php",
    success: function() {
     location.reload(true);
    }
  });

});

Как уже говорил @Barmar, но я бы порекомендовал использовать done и catch для будущей итерации. , просто чтобы узнать, в чем проблема в вызове или нет.

 async function getData(){
  const data =  await $.ajax({
    url: 'http://localhost/test/del.php',
    type: 'get',
    dataType: 'json'
});
return data;
}
 $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  getData().then((response) => {
   console.log("done ",response);
   location.reload(true);

  }).catch((error) => {
    //console.log("fail ", error);
  });


});