Prevent double click of some element

Question

I have a clickable <td> which does some action. However, strange things happen when I quickly make double click. Thus, I want to prevent it and make sure it is only single clickable event.

$.each(response, function(index) {
    $('#myID').append('<tr><td onclick="select(this)" >'+ response[index] +'</td></tr>');
});

function select(element){
...
}

I tried to use jQuery's .one() function, but this code above is a product of another event. So, I cannot use $(document).ready(); here. In my knowledge I have to make it like onclick="select(this)"... And it works. But here I need to disable double clicking.

Any help?

You can consider this as a tip to achieve it. You can add a class while creating the 'td' element. Then you can write the code like: $(".newClassAdded").on("dblclick", function(e){ e.preventDefault(); }); — Vinay Gayakwad, Oct 17 '18 at 14:18
@VinayGayakwad that won’t work, the `click` event will still fire two times. This needs to be done using a flag, set by the dblclick handler, and then evaluated inside the click handler. https://stackoverflow.com/a/9969252/10283047 — misorude, Oct 17 '18 at 14:22
@harunB10 so what is select doing? What is causing the issue when it is clicked twice. I need that basic info so I know why it is an issue with clicking twice. — epascarello, Oct 17 '18 at 14:23
I assume you are achieving this in the way you have outlined for a very valid reason as there are other ways of better handling this scenario. I suspect you will need to either introduce a timestamp and check against it for dbl click or some sort of delay in the select function to achieve your goal. Something that might help you: https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately — alpharomeo, Oct 17 '18 at 14:24
You can have a look at the answer in the link shared by @misorude . I believe that approach could help you to make it work . — Vinay Gayakwad, Oct 17 '18 at 14:29

score 2 · Accepted Answer · answered Oct 17 '18 at 14:32

So add a check that the Ajax request is active....

function select(element){
  var elem = $(element);
  if(elem.hasClass("active")) {  // is ajax call active?
    return false;
  }
  elem.addClass("active");  // set it that it is active
  $.ajax({
    url: "foo"
  })
    .done(function(){})
    .always(function(){
      elem.removeClass("active");  // call is done, so remove active state
    })
}

score 0 · Answer 2 · answered Oct 17 '18 at 14:54

You can simply disable button until ajax finishes its operation

function select(element){
    $(element).prop('disabled', true);
    $.ajax({
        url'url',
        success:function(response){
            $(element).prop('disabled', false);
        }
    });
}

Prevent double click of some element

2 Answers2