CODEWITHSUNDEEP
javascriptjqueryhtmlcss
M Berger
M Berger

Reputation: 13

Disable then Re-Enable onClick()

I have a website that I am creating and there are different divs each with their own content. All of them are hidden except the main one that shows up on the homepage. The transitions are pretty long, and I like it that way, but the problem is that if somebody spams the navbar buttons it opens up all those divs ontop of each other. So to prevent that I want to temporarily disable the onClick for an <a></a> element. Then enable it after the transition is done. Currently I am able to disable it, but cannot find a way to re-enable it.

    function disable(){
        $(".bar").unbind();
        $(".bar").removeAttr("onClick");
    }

I know how to call a function after a certain amount of time, but what is the "enable" equivalent to the code in this function?

Upvotes: 1

Views: 2396

Answers (3)

Swivel
Swivel

Reputation: 3297

As somewhat of an extension to nmg49's answer, I'd like to provide a solution that's a little more in depth.

Essentially what you'll want to do is create a flag to determine whether or not you are currently transitioning, and cancel the onClick if it is true (disabling it after the transition is complete).

var isTransitioning = false;
$('.bar').onClick(function(){
    if(isTransitioning) return;
    isTransitioning = true;
    // DO TRANSITION
});

Once the transition is complete, you simply set isTransitioning to false (either in a callback, or at the end of your onClick function; which ever one applies to your code).

This will ensure that, no matter how many times they click the button, they will not be able to transition if they're already in transition.

Upvotes: 1

David Barker
David Barker

Reputation: 14620

The exact opposite would be to set the onClick back on the element.

$('.bar').attr('onClick', function() { alert('blah'); });

or with vanilla js

document.querySelector(".bar")
        .setAttribute('onClick', function() {...});

However, this is difficult to manage for many elements with the same functionality. It would be easier to have this entirely managed with javascript (and jQuery in this case).

function clickEvent(event) {
    var self = $(this);

    // Unbind the event
    self.off(clickEvent);

    // Click logic here

    // Rebind event
    self.on('click', clickEvent);
}

$('.bar').on('click', clickEvent);

Upvotes: 2

nmg49
nmg49

Reputation: 1386

Instead of disabling the event on the DOM, you can just add an extra piece of logic to your dynamic divs:

$('#mydiv').click(function() {
  if(!inTransition())
    // DO A THING
  else
    // DON'T DO A THING
});

As a side note: If you're doing a lot of dynamic DOM manipulation, you may want to look into using a data binding framework such as Angular or Knockout. jQuery is nice for simple DOM manipulations, but it can quickly become messy and hard to maintain if you're doing something complex (which it sounds like you are).

Upvotes: 1

Related Questions