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调用而不是jsut 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（）方法停止an的默认操作发生的因素。例如：阻止提交按钮提交表格。阻止链接跟踪URL。

我也有这种类型的问题，我已经通过使用它来阻止它...可能它会帮助你

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

你必须将图像保存在div id'loading-image'中，默认情况下显示为：none（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，以便该功能与调用它的特定按钮无关。）

避免对div进行多次点击

6 个答案: