How to bind click event after unbind in jquery

Question

I want to unbind click event of button until ajax call completes.

It unbinds click but I am not able to make it rebind click.

Below is my Ajax Call:-

   $("#btnsearch").click(function (event) {        
            $('#btnsearch').text('Wait...').unbind('click');
            $.ajax({
                url: "//api/Ulyx/OrderDetails",
                type: "GET",
                dataType: "json",
                beforeSend: function () {               
                },
                async: false,           
                },
                crossDomain: true,
                complete: function (data) {                 
                    $('#btnsearch').text('Search').bind('click');                  
                }
            });

You need to specify the event handler as well.

gurvinder372
– gurvinder372

2018-01-16 09:38:30 +00:00
Commented Jan 16, 2018 at 9:38 — gurvinder372
– gurvinder372, Commented Jan 16, 2018 at 9:38

Rory McCrossan · Accepted Answer · 2018-01-16 09:40:12Z

1

Rather than binding/unbinding events, you could simply store a state variable to say that an AJAX request is in progress to disallow the sending of another one:

$("#btnsearch").click(function(event) {
  if (!$(this).data('ajax-in-progress')) {
    $(this).text('Wait...').data('ajax-in-progress', true);

    $.ajax({
      url: "//api/Ulyx/OrderDetails",
      type: "GET",
      dataType: "json",
      crossDomain: true,
      complete: function(data) {
        $('#btnsearch').text('Search').data('ajax-in-progress', false);
      }
    });
  }
});

Also note that I removed the async: false setting as it's very bad practice, and I fixed the syntax issues with the call, which I presume were just caused when copying the code to the question.

answered Jan 16, 2018 at 9:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sunil Kumar Over a year ago

thanks @Rory, will this function stop clicking the button if ajax didn't complete?

Rory McCrossan Over a year ago

No, as the complete is always executed, regardless if the AJAX request was a success or not.

Sunil Kumar Over a year ago

but i need to stop clicking on the same button untill ajax completes, pls modify your answer....

Rory McCrossan Over a year ago

That's what my answer does. If the #btnsearch element is a button you could just disable it.

Sunil Kumar Over a year ago

i used disabled as well but i dont why its not working may be due to asyn false

Collectives™ on Stack Overflow

How to bind click event after unbind in jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related