如何防止在jQuery中连续单击按钮？

Question

您好，我试图在用户单击按钮时通过AJAX调用重设div内容。但是，如果用户连续单击，则会发生错误。我想防止用户禁用点击或停止动画（如果开始）。

我尝试了jQuery的停止功能，但无法解决问题。

我正在使用此代码

$(".reset").click(function (e) {
    e.preventDefault();
    $(".product-group > .row").hide('slide',{direction:"left",distance:1900},200);//,function () {

        var product_groups = $(".product-group");
        $.ajax({
                type: 'POST',
                url: "?callback=?", 
                data: "",
                success: function(data) {
                    product_groups.html($(data).find(".product-group").html());
                    PageCenterer();
                    isOnlyTwoProductFields();
                }
            });
        //$(".product-group").html($("#product-field").html()).append($("#product-field").html());
        count=$(".product-group > .row").size();
        var index=$(".product-group > .row").index();
        console.log(index);
        $(".product-group > .row").each(function(index){
        if ($(window).width()<600) {
            $(this).find("label:first").text((index+1));
        }else{
            $(this).find("label:first").text((index+1)+"."+product);
        }
        //isOnlyTwoProductFields();
        //PageCenterer();
        });
    //});

    });

Answer 1

您可以在用户单击按钮后禁用它，并在动画或某些内容（例如AJAX调用）完成后启用。

 $(function () { $("#frm").submit(function () { $(this).find("input").prop("disabled", true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm"> <p>You can click me only once!</p> <input type="submit" value="Send" /> </form> 

您必须使用上面的代码，但是由于该代码段已被沙箱化，因此另一种选择是：

 $(function () { $("#frm input").click(function () { $this = $(this); $this.prop("disabled", true); setTimeout(function () { $this.prop("disabled", false); }, 3000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm"> <p>You can click me only once! Gets enabled after request is fulfilled (dummy 3 seconds).</p> <input type="submit" value="Send" /> </form> 

Answer 2

每当执行click或doubleClick函数调用时。

在这些函数的第一行中，写入$('button').attr(“disabled”, true);

Answer 3

您可以访问按钮的HTML属性“禁用”，并将其初始设置为false，然后在单击该按钮时将其设置为true。

$(function () {
    $('.reset').prop('disabled', false);

    $(".reset").click(function (e) {
        $(this).prop('disabled', true);
        //...your code
    });
}

另外，请检查您是否可以使用其ID来选择按钮。 在这里按类名选择按钮控件似乎不正确，因为多个控件可能使用同一类。