Fatal编程技术网

Javascript 避免多次单击div

javascript jquery ajax

Javascript 避免多次单击div,javascript,jquery,ajax,Javascript,Jquery,Ajax,这可能很简单，但我仍然没有找到解决方案，我希望在完成ajax调用之前避免多次单击按钮 以下是我尝试过的： <button id="btn_pay"></button> $("#btn_pay").click( function() { $('#btn_pay').prop('disabled', true); Stripe.card.createToken(form, stripeResponseHandler); }); var

这可能很简单，但我仍然没有找到解决方案，我希望在完成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);
                }
            });


$（“#btn_支付”）。单击（函数（）{
$（'btn_pay'）.prop（'disabled'，true）；
Stripe.card.createToken（表单，stripeResponseHandler）；
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
警惕（“成功”）；
}，完成：函数（）{
//我们重新启用按钮
$（'btn_pay'）.prop（'disabled'，false）；
}
});
问题: 如果我在按钮上单击几次，就会出现许多警报，就像按钮仍然处于活动状态一样，而且每次都会执行许多ajax调用而不是jsut 1

有什么想法吗？

试试
e.preventdefault（）；

event.preventDefault（）方法停止 元素。例如：阻止提交按钮 提交表单。阻止链接跟随URL

我也遇到过这类问题，我用这个来预防它。也许它会对你有帮助


$（“btn支付”）。单击（功能（e）{
e、 预防默认值（）；
$（'btn_pay'）.prop（'disabled'，true）；
Stripe.card.createToken（表单，stripeResponseHandler）；
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
警惕（“成功”）；
}，完成：函数（）{
//我们重新启用按钮
$（'btn_pay'）.prop（'disabled'，false）；
}
});
试试
e.preventdefault（）；

event.preventDefault（）方法停止 元素。例如：阻止提交按钮 提交表单。阻止链接跟随URL

我也遇到过这类问题，我用这个来预防它。也许它会对你有帮助


$（“btn支付”）。单击（功能（e）{
e、 预防默认值（）；
$（'btn_pay'）.prop（'disabled'，true）；
Stripe.card.createToken（表单，stripeResponseHandler）；
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
警惕（“成功”）；
}，完成：函数（）{
//我们重新启用按钮
$（'btn_pay'）.prop（'disabled'，false）；
}
});
修改您的代码：

.unbind（）
从元素中删除以前附加的事件处理程序

<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>

.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>


$（“btn支付”）。单击（功能（e）{
美元（“#btn#u pay”）。解除绑定（“单击”）；
$（'btn_pay'）.prop（'disabled'，true）；
Stripe.card.createToken（表单，stripeResponseHandler）；
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
警惕（“成功”）；
}，完成：函数（）{
//我们重新启用按钮
美元（“#btn#u pay”）。绑定（“单击”）；
}
});
签出教程：

修改您的代码：

.unbind（）
从元素中删除以前附加的事件处理程序

<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>

.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>


$（“btn支付”）。单击（功能（e）{
美元（“#btn#u pay”）。解除绑定（“单击”）；
$（'btn_pay'）.prop（'disabled'，true）；
Stripe.card.createToken（表单，stripeResponseHandler）；
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
警惕（“成功”）；
}，完成：函数（）{
//我们重新启用按钮
美元（“#btn#u pay”）。绑定（“单击”）；
}
});
签出教程：

您可以使用一个简单的变量进行控制：

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


var disabled=false；//控制按钮状态的全局变量
$（“#btn_支付”）。单击（函数（）{
如果（禁用）{
回来
}
Stripe.card.createToken（表单，stripeResponseHandler）；
disabled=true；//按钮现在被阻止
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
disabled=false；//释放按钮锁
警惕（“成功”）；
}，完成：函数（）{
disabled=false；//释放按钮锁
}，失败：函数（）{
disabled=false；//失败时，还需要释放锁
}
});
}
使用事件处理程序的其他解决方案也可能适用于您，但这是实现此功能的一种更简单的方法。

您可以使用一个简单的变量来控制它：

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


var disabled=false；//控制按钮状态的全局变量
$（“#btn_支付”）。单击（函数（）{
如果（禁用）{
回来
}
Stripe.card.createToken（表单，stripeResponseHandler）；
disabled=true；//按钮现在被阻止
});
var stripeResponseHandler=函数（状态、响应）{
$.ajax({
类型：“POST”，
成功：功能（数据）{
disabled=false；//释放按钮锁
警惕（“成功”）；
}，完成：func

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