避免在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调用而不是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（）方法停止发生元素的默认操作。 例如：阻止提交按钮提交表单。 阻止链接跟随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

您还可以通过添加加载图像来避免多次单击按钮，直到在beforeSend：事件中完成ajax调用为止。 例如：

$.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 Setup）。

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 ，这样该函数就不会与调用它的特定按钮绑定了）。