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

Question

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

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

Благодаря

Answer 1

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

• Скрыть ваш 'представить' DIV и показать другой, «Пожалуйста, подождите .. . 'div на своем месте

• Установите отключенное свойство в 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... 
  }); 
  

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

Answer 2

one Использование:

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