CODEWITHSUNDEEP
javascriptjquery
harunB10
harunB10

Reputation: 5197

Prevent double click of some element

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?

Upvotes: 0

Views: 449

Answers (2)

Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

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);
        }
    });
}

Upvotes: 0

epascarello
epascarello

Reputation: 207501

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
    })
}

Upvotes: 2

Related Questions