Disable/Reenable div event handlers using jQuery 1.4.2

Question

We are using a page with layers of Javascript tabs. We are trying to disable access to some of the tabs based on user permissions.

For example, here is a tab example:

<div class="executives tab productA productB productC" runat="server" id="executivesTop">
    <div class="tabLeft">
        <div class="tabMain">
            Executives
        </div>
    </div>
</div>

The "tabLeft" and "tabMain" are just for the CSS layout of the tabs and do not interfere with anything. The "executivesTop" div is where all of the action takes place. We use a separate .js file that assigns the event handlers to the various tabs.

When the page loads, I want to disable all mouseenter, mouseleave, mouseover, and click events on all tabs. I first did this with the following lines in (window).load:

//this line disables the event handlers from the tabs
$(".tab").unbind('mouseover mouseenter mouseleave click');
//this line changes the basic css to appear "disabled"
$(".tab").css('color', 'grey');

We have a server-side script that determines the current user's permissions and sends those to a field that jQuery can read. jQuery then looks at those permissions and enables tabs accordingly.

//SubscriptionsInput is a hidden label that has a list of user permissions in the form of "productA,productB,productC"
if (SubscriptionsInput.toLowerCase().indexOf("productA") >= 0) {
    $(".productA").bind('mouseover mouseenter mouseleave click');
}

Obviously this isn't going to work, as I'm not reassigning the event handlers to the tabs. The various mouse events go through a class sheet, and the click events are in the aforementioned .js file. I don't know how to reassign these. I think my reasoning is sound, though, in disabling everything and then reenabling things as permissions dictate.

The simple solution, as far as what I've researched suggests, is to use the .on() and .off() functionality, which would be great if we were at jq1.9 or better, but we're at jq1.4.2 still, which is frustrating. I can't use .bind()/.unbind() unless there is a simple way to reattach the event handlers from the existing .js file.

I really just need to be able to disable and reenable "mouse*" and "click" and can't use .on()/.off(). Also, I need to be able to revert the css of the tabs back to the stylesheet definitions.

I hope I've explained this clearly enough. Can anybody offer any suggestions or code tricks I could use to bring this functionality to life?

edit: my initial build had all the tabs loading and the ABSENCE of a permission would disable relevant tabs, which would make the .unbind() idea work well (as permissions wouldn't be given or removed mid-session so an unbind is fine), but some tabs are applicable to multiple permission levels. I'd rather enable content as users have permissions rather than risk disabling something that should be accessible at a given permissions level.

Answer 1

Change your logic around to only unbind if they don't have permissions.

//this line disables the event handlers from the tabs
//$(".tab").unbind('mouseover mouseenter mouseleave click');
//this line changes the basic css to appear "disabled"
//$(".tab").css('color', 'grey');

//SubscriptionsInput is a hidden label that has a list of user permissions in the form of "productA,productB,productC"
if (SubscriptionsInput.toLowerCase().indexOf("productA") == 0) {
    $(".productA").unbind('mouseover mouseenter mouseleave click').css('color', 'grey');
}