Question

I’ve got a step-by-step wizard kind of flow where after each step the information that the user entered for that step collapses down into a brief summary view, and a “Go back” link appears next to it, allowing the user to jump back to that step in the flow if they decide they want to change something.

The problem is, I don’t want the “Go Back” links to be clickable while the wizard is animating. To accomplish this I am using a trick that I have used many times before; caching the onclick handler to a different property when I want it to be disabled, and then restoring it when I want it to become clickable again. This is the first time I have tried doing this with jQuery, and for some reason it is not working. My disabling code is:

    jQuery.each($("a.goBackLink"), function() {
        this._oldOnclick = this.onclick;
        this.onclick = function() {alert("disabled!!!");};
        $(this).css("color", "lightGray ! important");
    });

…and my enabling code is:

    jQuery.each($("a.goBackLink"), function() {
        this.onclick = this._oldOnclick;
        $(this).css("color", "#0000CC ! important");
    });

I’m not sure why it’s not working (these are good, old-fashioned onclick handlers defined using the onclick attribute on the corresponding link tags). After disabling the links I always get the “disabled!!!” message when clicking them, even after I run the code that should re-enable them. Any ideas?

One other minor issue with this code is that the css() call to change the link color also doesn’t appear to be working.

Answer 1

I wouldn’t bother swapping around your click handlers. Instead, try adding a conditional check inside of the click handler to see if some target element is currently animating.

if ($('#someElement:animated').length == 0)
{
    // nothing is animating, go ahead and do stuff
}