избегайте множественных щелчков мышью на div

Question

Это, вероятно, просто, но я все еще не нашел решения, я бы хотел избежать нескольких щелчков по кнопке, прежде чем завершить вызов ajax.

Вот что я пробовал:

<button id="btn_pay"></button> 

$("#btn_pay").click(function() { 
    $('#btn_pay').prop('disabled', true); 
    Stripe.card.createToken(form, stripeResponseHandler); 
}); 

      var stripeResponseHandler = function(status, response) { 
      $.ajax({ 
       type: "POST", 
       success: function(data){ 
        alert("success"); 
       },complete:function(){ 
        //we re-enable the button 
        $('#btn_pay').prop('disabled', false); 
       } 
      }); 

Проблема: Если я нажимаю несколько раз на кнопку, появляется много предупреждений, это как кнопка по-прежнему активен, и многие Ajax вызова выполняются вместо этого нужно просто 1 за раз.

Есть идеи?

Answer 1

Вы можете управлять им с помощью простого переменного:

<button id="btn_pay"></button> 

    var disabled = false; // global var to control button state 

    $("#btn_pay").click(function() { 
     if (disabled) { 
      return; 
     } 

     Stripe.card.createToken(form, stripeResponseHandler); 
     disabled = true; // button is now blocked 
    }); 

    var stripeResponseHandler = function(status, response) { 
      $.ajax({ 
        type: "POST", 
        success: function(data){ 
         disabled = false; // release button lock 
         alert("success"); 
        },complete:function(){ 
         disabled = false; // release button lock 
        },fail: function(){ 
         disabled = false; // when fail, you need to release the lock too 
        } 
      }); 
     } 

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

Answer 2

Попробуйтеe.preventdefault();

Метод event.preventDefault() прекращает действие по умолчанию в элемента от происходящего. Например: Предотвратите отправку формы с , отправив форму. Предотвратите ссылку из URL-адреса.

Я также facine этот тип проблемы, я должен предотвратить его с помощью этого .. Может быть, это поможет вам

<button id="btn_pay"></button> 

$("#btn_pay").click(function(e) { 
    e.preventdefault(); 
    $('#btn_pay').prop('disabled', true); 
    Stripe.card.createToken(form, stripeResponseHandler); 
}); 

      var stripeResponseHandler = function(status, response) { 
      $.ajax({ 
       type: "POST", 
       success: function(data){ 
        alert("success"); 
       },complete:function(){ 
        //we re-enable the button 
        $('#btn_pay').prop('disabled', false); 
       } 
      }); 

Answer 3

Изменить код:

.unbind() Удаление ранее связанный обработчик событий из элементов.

.bind Прикрепите обработчик к событию для элементов.

<button id="btn_pay"></button> 

<script> 
$("#btn_pay").click(function(e) { 
    $("#btn_pay").unbind("click"); 
    $('#btn_pay').prop('disabled', true); 
    Stripe.card.createToken(form, stripeResponseHandler); 
}); 

      var stripeResponseHandler = function(status, response) { 
      $.ajax({ 
       type: "POST", 
       success: function(data){ 
        alert("success"); 
       },complete:function(){ 
        //we re-enable the button 
        $("#btn_pay").bind("click"); 
       } 
      }); 
</script> 

заказ учебники: http://api.jquery.com/bind/

http://api.jquery.com/unbind/

Answer 4

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

$.ajax 
     ({ 
      url: 'your-url', 
      data: "", 
      type: 'post', 
      beforeSend: function() { 
         $("#loading-image").show(); 
        }, 
      success: function(result) 
      { 
       //alert(result); 
       $("#loading-image").hide(); 
      } 
     }); 

Вы должны сохранить изображение в сНу ид «погрузо-изображения» и отображения по умолчанию: нет (Настройка CSS).

Answer 5

<div id="loader_div_all" style="position: absolute ! important;opacity: 0.60;display: none;"> 
<img src="ajaxSpinner.gif" style="width: 200px; height: 200px; margin-left: 500px; margin-top: 1060px;'"> 

$("#buttonid").click(function(){ 

    $.ajax({ 
      url: 'PATH_TO_AJAX_REQUEST_URL', 
      type: 'POST', 
      data: {/*Data set here*/}, 
      beforeSend: function() { 
       $("#loader_div_all").css('display','block'); 
      }, 
      success: function(resp) { 
       $("#loader_div_all").css('display','none'); 
       /*Perform Ajax Success Action Here*/ 
      } 
     }); 
}); 

Answer 6

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

$("#btn_pay").click(function(event) { 
    event.preventDefault(); 
    if ($(this).prop('disabled')) { 
     return; 
    } 
    $(this).prop('disabled', true); 
    Stripe.card.createToken(form, stripeResponseHandler); 
}); 

(Было бы лучше, чтобы передать функцию обратного вызова повторного включения кнопки stripeResponseHandler, так что эта функция не привязана к определенной кнопке, назвав его).