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

Question

Hello I am trying to reset a div content with an AJAX call when user clicks a button.But if user clicks continuously the error occurs.I want to prevent user to disable click or stop the animation if starts.

And I tried stop function of jQuery but I can't solve the problem.

I am using this code

$(".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

You can disable once the user clicks the button, and enable after the animation or something has been completed, like AJAX call.

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

You have to use the above code, but since the snippet is sandboxed, the other alternative is:

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

Whenever the click or doubleClick function call is executing.

In first line of these function write $('button').attr(“disabled”, true);

Answer 3

You can access the HTML property- 'disabled' of the button and set it false initially and set it to true on click of that button.

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

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

Also, please check if you can pick the button using it's ID. Picking the button control by class name here does not seem right as multiple controls might use the same class.