prevent double clicks on links with jQuery

Question

What's the best way to prevent a double-click on a link with jQuery?

I have a link that triggers an ajax call and when that ajax call returns it shows a message.

The problem is if I double-click, or click it twice before the ajax call returns, I wind up with two messages on the page when I really want just one.

I need like a disabled attribute on a button. But that doesn't work on links.

$('a').on('click', function(e){
    e.preventDefault();

    //do ajax call
});

possible duplicate of [Disabling links to stop double-clicks in JQuery](http://stackoverflow.com/questions/1681679/disabling-links-to-stop-double-clicks-in-jquery) — Ahsan Shah, Sep 29 '13 at 07:19
That's what `on()` and `off()` are for -> http://jsfiddle.net/e8MzH/ — adeneo, Sep 29 '13 at 07:23

Artyom Neustroev · Answer 1 · 2013-09-29T07:10:02.917

7

You can use data- attributes, something like this:

$('a').on('click', function () {
   var $this = $(this);
   var alreadyClicked = $this.data('clicked');
   if (alreadyClicked) {
      return false;
   }
   $this.data('clicked', true);
   $.ajax({
      //some options
      success: function (data) { //or complete
         //stuff
         $this.data('clicked', false);
      }
   })
});

edited Sep 29 '13 at 07:10

answered Sep 29 '13 at 06:59

Artyom Neustroev

8,627
5
33
57

score 5 · Answer 2 · answered Jan 19 '15 at 23:28

I came with next simple jquery plugin:

(function($) {
  $.fn.oneclick = function() {
    $(this).one('click', function() {
      $(this).click(function() { return false; });
    });
  };
  // auto discover one-click elements
  $(function() { $('[data-oneclick]').oneclick(); });
}(jQuery || Zepto));

// Then apply to selected elements
$('a.oneclick').oneclick();

Or just add custom data atribute in html:

<a data-oneclick href="/">One click</a>

score 1 · Answer 3 · edited Apr 06 '15 at 12:55

you can use a dummy class for this.

$('a#anchorID').bind('click',function(){
           if($(this).hasClass('alreadyClicked')){
              return false;
           }else{
                $(this).addClass('alreadyClicked);
                $/ajax({
                    success: function(){$('a#anchorID').removeClass('alreadyClicked');},
                    error: function(){$('a#anchorID').removeClass('alreadyClicked');}
                });
           }});

score 1 · Answer 4 · answered Sep 29 '13 at 07:33

1

You need async:false

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

$.ajax({
      async: false,
      success: function (data) { 

         //your message here
      }
   })

answered Sep 29 '13 at 07:33

Moeed Farooqui

3,604
1
18
23

what does this get me? – chovy Sep 29 '13 at 08:17
This will send the next request once the response of the first request has been arrived – Moeed Farooqui Sep 29 '13 at 08:53
interesting. i'll have to give it a shot. will they queue up if someone mashes the link? – chovy Sep 29 '13 at 08:54
If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet – Moeed Farooqui Sep 29 '13 at 09:13
Setting async:true freezes the browser until the request is complete which beats the asynchronous nature of AJAX. – Edwin M Feb 19 '14 at 12:56

thiagobraga · Answer 5 · 2013-09-29T17:32:36.650

Check this example. You can disable the button via CSS attribute after the first click (and remove this attribute after an ajax request or with a setTimeout) or use the jQuery.one() function to remove the trigger after the first click (without disabling the button)

var normal_button = $('#normal'),
  one_button = $('#one'),
  disabled_button = $('#disabled'),
  result = $('#result');

normal_button.on('click', function () {
  result.removeClass('hide').append(normal_button.html()+'<br/>');
});

one_button.one('click', function () {
  result.removeClass('hide').append(one_button.html()+'<br/>');
});

disabled_button.on('click', function () {
  disabled_button.attr('disabled', true);
  setTimeout(function () {
    result.removeClass('hide').append(disabled_button.html()+'<br/>');
  }, 2000);
});

score 0 · Accepted Answer · answered Jan 23 '15 at 10:14

0

Although there are some good solutions offered, the method I ended up using was to just use a <button class="link"> that I can set the disabled attribute on.

Sometimes simplest solution is best.

answered Jan 23 '15 at 10:14

chovy

72,281
52
227
295

Satyam Koyani · Answer 7 · 2013-09-29T07:14:24.793

-1

You can disable click event on that link second time by using Jquery

$(this).unbind('click');

See this jsfiddle for reference Demo

edited Sep 29 '13 at 07:14

answered Sep 29 '13 at 07:03

Satyam Koyani

4,236
2
22
48

i said link. not form/button – chovy Sep 29 '13 at 07:04
Here you did not specified your code so i just gave your hint by which you can achieve your requirement. – Satyam Koyani Sep 29 '13 at 07:04

score -1 · Answer 8 · answered Sep 29 '13 at 07:16

-1

You can disable your links (for instance, href="#" ), and use a click event instead, binded to the link using the jQuery one() function.

answered Sep 29 '13 at 07:16

ygesher

1,133
12
26

score -1 · Answer 9 · answered Sep 29 '13 at 07:18

-1

Bind all the links with class "button" and try this:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

answered Sep 29 '13 at 07:18

Ahsan Shah

3,931
1
34
48

prevent double clicks on links with jQuery

9 Answers9