Как я могу отключить DIV, "действующий как кнопка отправки" после того, как на него нажали один раз?

Question

У меня есть div, который работает как кнопка отправки, поэтому, когда пользователь щелкает по нему, он отправляет форму и отправляет запрос ajax на сервер. Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь нажимает кнопку дважды, он создает дубликат, даже если это AJAX-запрос. Поэтому я пытаюсь просто отключить и переименовать его в "Пожалуйста, подождите...", пока запрос не будет выполнен. предотвратить двойную подачу.

Итак, мой вопрос, как переименовать и отключить "серый" div после нажатия, используя jQuery?

Спасибо

Answer 1

Есть пара подходов, которые вы можете использовать:

• Скройте свой div для отправки и покажите другой div, "Пожалуйста, подождите..."

• Установите свойство disabled на элемент div при его нажатии и проверьте это свойство в обработчике отправки.

  $("div.submit").click(function(e) {
      if ($(this).prop("disabled"))
          return false;
      // any other error checking, setup etc...
      $(this).prop("disabled", true);
      // submit the request...
  });
  

Вы также можете использовать глобальный флаг или функцию.data() jQuery, чтобы пометить, когда форма была отправлена, но я бы рекомендовал подход с использованием свойств. После завершения запроса вы можете установить для свойства disabled значение false, что позволит при необходимости повторно отправить форму позже.

Answer 2

Используйте один:

$('#mydiv').one('click', function(){ // one : only once
  $.ajax({ ... });// launch your task
  $(this).html('Please wait...') // change the text
     .css('background-color','#444'); // and the background color
});