leoOrion leoOrion - 6 months ago 14
jQuery Question

Making a span unclickable temporarily

In a simon game, when the series is being shown to the user, I want the span(colored quadrants) to be unclickable. Currently I am employing this function which adds the

pointer-events:none
to the span when it is being animated.

function toggleUnclickable(){
//unclickable class has the css property pointer-events:none
$("#1").toggleClass("unclickable");
$("#2").toggleClass("unclickable");
$("#3").toggleClass("unclickable");
$("#4").toggleClass("unclickable");

}


I am calling this function before the animation starts and after the animation ends.

function animateGeneratedPattern() {

toggleUnclickable();

function animateNextPattern(lightup) {
.... // code for animation
}
animateNextPattern(true);
toggleUnclickable();

}


But I am still able to click when the spans are being animated?? Is there something wrong that I am doing ??

Answer

Try to use this in your elements to enable and disable the click:

  $( "#myElement").unbind( "click" ); //disable click
  $( "#myElement").bind( "click" ); //enable