使用jQuery 1.4.2禁用/启用div事件处理程序

时间:2014-04-09 17:35:36

标签: jquery asp.net jquery-1.4

我们正在使用包含Javascript标签层的页面。我们正尝试根据用户权限禁用对某些标签的访问。

例如,这是一个标签示例:

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

“tabLeft”和“tabMain”仅适用于标签的CSS布局,不会干扰任何内容。 “executiveTop”div是所有行动发生的地方。我们使用单独的.js文件将事件处理程序分配给各个选项卡。

当页面加载时,我想在所有选项卡上禁用所有mouseenter,mouseleave,mouseover和click事件。我首先在(窗口).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');

我们有一个服务器端脚本,用于确定当前用户的权限,并将这些权限发送到jQuery可以读取的字段。然后jQuery查看这些权限并相应地启用标签。

//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');
}

显然这不起作用,因为我没有将事件处理程序重新分配给选项卡。各种鼠标事件都通过类表,单击事件位于前面提到的.js文件中。我不知道如何重新分配这些。我认为我的推理是合理的,在禁用所有内容,然后根据权限要求重新启用内容。

就我所研究的建议而言,简单的解决方案是使用.on()和.off()功能,如果我们处于jq1.9或更高版本,这将是很好的,但我们是在jq1.4.2仍然,这是令人沮丧的。除非有一种从现有.js文件重新附加事件处理程序的简单方法,否则我不能使用.bind()/。unbind()。

我真的只需要能够禁用并重新启用“鼠标*”和“点击”,并且不能使用.on()/。off()。此外,我需要能够将选项卡的css恢复为样式表定义。

我希望我已经清楚地解释了这一点。任何人都可以提供任何我可以使用的建议或代码技巧来实现这一功能吗?

编辑:我的初始构建已加载所有选项卡,并且权限的ABSENCE将禁用相关选项卡,这将使.unbind()想法正常工作(因为会话期间不会给予或删除权限,因此unbind很好),但有些选项卡适用于多个权限级别。我宁愿启用内容,因为用户具有权限,而不是冒险禁用应该在给定权限级别可访问的内容。

1 个答案:

答案 0 :(得分:0)

如果他们没有权限,请将您的逻辑更改为仅取消绑定。

//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');
}