I have designed a toolbar that uses anchor tags (<a>) with click events assocated with each one. I want to build a JQuery plug-in that allows me to easily enable and disable certain anchor tags in my toolbar with syntax similar to this...

 

$("#aDelete").linkbutton("disable");

 

These things would have to happen in the "disable" event:

 

1) The CSS class would have to change to a "disabled" class to change the look of the button.

2) The current event stack (especially the "click" event) would have to be saved somewhere

3) The current event stack would have to be cleared

4) A new click event would have to be created that returns false and calls e.preventDefault()

 

Below is my code for the plug-in I started. However, when I call the "unbind" method, scope is lost, testEvents no longer holds the events stack like it does if I do not call unbind.

 

Anyone have any ideas?

 

I guess if we can't get this to work my next idea would be to build a <div> that has a gray transparency and a z-index higher than the <a> tag and put it on top of the link to "disable" the link. That way clicking or hovering only affects the <div> not the <a> tag under it.

 

Here's my code...

 

(function ($) {

    var methods = {
        disable: function (options) {
            var settings = $.extend($.fn.linkbutton.defaults, options || {});

            return this.each(function () {

                var storedClickEvents = $.data(this, "storedClickEvents");
                if (!storedClickEvents) {
                    anchorEvents = $(this).data("events");
                    $.data(this, "storedClickEvents", anchorEvents);

                    //$(this).unbind("click");

                    $(this).bind("click", function (e) {
                        e.stopImmediatePropagation();
                        e.preventDefault();
                        this.blur();
                        alert('no way! ' + settings.className);
                        return false;
                    });

                    $(this).addClass(settings.className);

                }
                // testEvents is nothing if unbind() is called
                var testEvents = $.data(this, "storedClickEvents");
            });
        },
        enable: function (options) {
            var settings = $.extend($.fn.linkbutton.defaults, options || {});

            return this.each(function () {

                var storedClickEvent = $.data(this, "storedClickEvent");
                if (storedClickEvent) {
                    for (var type in storedClickEvent) {
                        for (var handler in storedClickEvent[type]) {
                            jQuery.event.add($(this), type, storedClickEvent[type][handler], storedClickEvent[type][handler].data);
                        }
                    }
                    $.data(this, "storedClickEvent", null)
                }
                $(this).removeClass(settings.className);
            });
        }

    };

    $.fn.extend({
        linkbutton: function (method, options) {
            // if nothing is selected, return nothing; can't chain anyway
            if (!this.length) {
                options && options.debug && window.console && console.warn("nothing selected, can't validate, returning nothing");
                return;
            }
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else {
                $.error('Method ' + method + ' does not exist for jQuery.ajaxGreyOut');
            }

        }

    });

    $.fn.linkbutton.defaults = {
        className: "ui-toolbar-disabled"
    };

})(jQuery);