CODEWITHSUNDEEP
javascriptjquery
Sanyam Chopra
Sanyam Chopra

Reputation: 1

How to make a class non clickable till it executes a function and then make it clickable again?

i had a query on the following question already posted:"jQuery click() still being triggered after .clickable class is removed" Now in a similar situation, if a click of a class invokes a function, say a slider works that works with an animation and we want to make the click disabled only for the time the function executes and then made clickable again. How can we do that?

Upvotes: 0

Views: 85

Answers (3)

Stranded Kid
Stranded Kid

Reputation: 1395

If you do not care about IE, a quick (and dirty ?) solution is to add a class with pointer-events set no none to the element you want to disable all attached events, and then remove the class whenever you want.

It has some drawbacks (e.g some logic is put inside css) but I find it pretty handy.

Fiddle (won't work in IE, only tested in Chrome) : fiddle (I'm forced by SO to add the code here because I have a fiddle link)

JS

function onClick(evt) {
     alert("clicked !");
     evt.target.classList.add("no-event");
     setTimeout(function() {
         evt.target.classList.remove("no-event");
        alert("you can click again !");
     }, 5000);
}

CSS

.no-event {
    pointer-events : none;
}

Upvotes: 0

Jai
Jai

Reputation: 74738

say a slider works that works with an animation and we want to make the click disabled only for the time the function executes and then made clickable again.

There are several ways but if you want to use a case of slider then you can use it this way: 

$('#next, #prev').on('click', function(){
     if($(this).hasClass('clicked')){ return;} 
     $(this).addClass('clicked');// add the class to stop any execution after if check above.
});

Then you have to remove the clicked class from the button, when animation ends: 

$('.slider').on('animationend', function(){
    $('.clicked').removeClass('clicked'); // remove the class to enable it.
});

Upvotes: 0

Jackie
Jackie

Reputation: 494

You could add a class in the link class="clickable". And in the click function, do something like:

$('#clickme').bind('click', function(e) {
    ...
    if( !$(this).hasClass('clickable') ) { return; }
    ...
    // the rest of line will get executable only if link has clickable class
});

In other function, enable or disable the clickable whenever needed:

$('#clickme').addClass('clickable');  // to make it clickable

or

$('#clickme').removeClass('clickable');  // to make it 'non-clickable'

Upvotes: 2

Related Questions