学习 easyui：禁用 linkbutton 问题

1.问题的起源

linkbutton 是 easyui 中常用的一个控件，我们可以使用它创建按钮。用法很简单，使用 a 元素，标记上 easyui-linkbutton 的类就可以看到按钮了。

<a id="btn" class="easyui-linkbutton">这是一个按钮</a>

看起来就是这个样子

或者使用代码方式。

$("#btn").linkbutton();

不过，点了也没有作用，如果希望有作用，那么，再为它添加一个事件处理吧。通常你会使用 jQuery 的方式添加事件处理函数。结果可能是这样。

脚本中的事件注册。

   $("#btn").click(function () {
        alert("我被点到了！");
    });

看起来一切正常。很快你发现一个新的需求，需要暂时禁用这个按钮，太简单了，easyui 中已经提供了禁用按钮的方法 disable，来让我们禁用一下。

代码变成了这样。

using( ["parser","linkbutton"], function(){
    $("#btn").linkbutton();

    $("#btn").click(function () {
        alert("我被点到了！");
    });

    $("#btn").linkbutton("disable");
});

按钮则变成了这样。

再点击一下，傻眼了吧！提示框照样弹了出来！。

2. linkbutton 是如何禁用按钮的

easyui 提供了 linkbutton 的源代码，所以，我们可以很方便地看一下，内部是如何实现禁用按钮的。

function setButtonState(domElem, disabled) {                    // 设置按钮状态
    var data = $.data(domElem, "linkbutton");                   // 获取对象的数据
    if (disabled) {                                             // 禁用按钮
        data.options.disabled = true;
        var href = $(domElem).attr("href");                     // 获取超级连接
        if (href) {
            data.href = href;                                   // 保存原来的超级链接
            $(domElem).attr("href", "javascript:void(0)");      // 重新设置
        }
        if (domElem.onclick) {                                  // 是否有点击事件处理
            data.onclick = domElem.onclick;
            domElem.onclick = null;                             // 取消掉
        }
        $(domElem).addClass("l-btn-disabled");                  // 使用样式
    } else {
        data.options.disabled = false;                          // 启用按钮
        if (data.href) {                                        // 恢复原来的超级链接
            $(domElem).attr("href", data.href);
        }
        if (data.onclick) {                                     // 恢复原来的点击事件处理
            domElem.onclick = data.onclick;
        }
        $(domElem).removeClass("l-btn-disabled");
    }
}

可以看到，禁用的时候，首先将原来注册的点击事件处理保存到 data.onlick 中，然后，将元素的 onclick 设置为 null;

已经禁用了，又为什么没有效果呢？

3. 不同的事件处理方式

在 DOM 中，存在着两类不同的事件处理方式，DOM Level 0 方式和 DOM Level 2 方式。

在DOM Level 0的API中,通过在HTML中设置属性，或者在JavaScript中设置一个对象的属性(property)的方法注册事件. 例如，注册事件可以这样进行。

document.getElementById("btn").onclick = function () {
    alert("我被点击啦！");
};

取消事件注册，可以通过将 onclick 重新赋予一个 null 来完成。

而在DOM Level 2模型中,你通过调用那个对象的addEventListener()方法注册事件处理程序.

document.getElementById("btn").addEventListener("click", function () {
    alert("我被点击啦！");
}, false);

取消注册可以通过 removeEventListener 进行。

问题在于，这两种方式是各自独立处理的，互相并不影响。

如果你查看一下 jQuery 的原代码，比如参考一下这篇文章，就会看到，jQuery 使用的正是 DOM Level 2 方式。

if (elem.addEventListener) {
    elem.addEventListener(type, eventHandle, false);

} else if (elem.attachEvent) {
    elem.attachEvent("on" + type, eventHandle);
}

对比 easyui 中对于 linkbutton 的处理代码，我们会看到，由于 easyui 中使用了 DOM Level 0 方式处理按钮的启用和禁用，而 jQuery 则使用 DOM Level 2 方式进行事件的注册，两种方式擦肩而过，所以，我们的禁用失效了。

使用 DOM Level 0 方式，我们可以通过事件名称，方便地取得原来注册的事件处理函数，保存起来，以便以后回复。这正是 linkbutton 现在已经完成的。

使用 DOM Level 2 方式，我们又应该如何获取已经注册的事件处理函数呢？我们有 addEventListener，有 removeEventListener。但是已经注册的事件处理在哪里呢？

让我们看看 jQuery 是如何处理的。

4. jQuery 将我们注册的事件处理函数保存到哪里去了？

在 jQuery 中，为每个 DOM 对象准备了一个数据缓存对象，这个对象的使用方式很巧妙。

首先 jQuery 创建了一个用来规定每个 DOM 对象保存数据的时候使用的属性名，为了唯一，这个属性名使用了各种方式来保证唯一性。

在 jQuery 2.0 中是这样定义的。

expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" )

在 jQuery 1.4.4 中是这样定义的。

expando: "jQuery" + jQuery.now(),

所以，最终，jQuery.expando 可能是类似这样的一个唯一的值：jQuery16101803968874529044，这个值用来作为 DOM 元素的一个扩展属性，避免与其他脚本库扩展属性的冲突。它的值则是这个 DOM 缓存的数据对象的编号。在 jQuery 上则定义了一个名为 cache 的全局缓存对象，使用这个编号来到 cache 对象上找到属于自己的数据缓存对象。

每个元素对应的数据缓存对象上的 events 属性中用来保存这个元素注册的事件处理程序。

events 对象上，再通过事件名称作为索引器，保存对应事件的处理数据，每个事件名称对应的数据是一个数组，数组中是一个一个的事件描述对象。在 jQuery 中定义如下。

handleObj = jQuery.extend({
    type: type,
    origType: origType,
    data: data,
    handler: handler,
    guid: handler.guid,
    selector: selector,
    needsContext: selector && jQuery.expr.match.needsContext.test(selector),
    namespace: namespaces.join(".")
}, handleObjIn);

其中的 handler 就是注册的事件处理函数。

(1 << -1) - 1 的 jQuery event（上）和 jQuery event（下）有详细的说明，可以参考一下。

终于找到了，我们又如何拿到这个 click 事件的处理数组呢？

还有一些小问题要处理，本来，jQuery 提供了一个 $.data 函数可以让我们直接获取元素缓存的数据，包括 jQuery 内部使用的 events 数据。但是，从 jQuery 1.8 开始，使用 $.data 就不可以了。见 jQuery 1.8 Released 这篇文章

$(element).data(“events”): In version 1.6, jQuery separated its internal data from the user’s data to prevent name 
collisions. However, some people were using the internal undocumented “events” data structure 
so we made it possible to still retrieve that via .data(). This is now removed in 1.8, 
but you can still get to the events data for debugging purposes via $._data(element, "events"). 
Note that this is not a supported public interface; 
the actual data structures may change incompatibly from version to version.

但是，依然提供了一个非支持的接口 $._data(element, "events") 来获取这些数据。

snandy 的读jQuery之六（缓存数据）中有比较详细的说明。

5. 修复 linkbutton 的启用和禁用

修改的方式，就是在原来的基础上，增加对于通过 DOM Level 2 方式注册的事件进行处理。

我们检查是否注册了 jQuery 的 click 事件处理函数，如果有，在数据缓存对象上增加一个名为 savedHandlers 的数组来保存原来的点击事件处理函数，然后，从原来的对象上取消已经注册的事件处理函数。

恢复的时候，检查数据对象上是否有保存的事件处理函数数组，如果存在，遍历这个数组，将这些事件处理函数重新注册到元素上。

function setButtonState(domElem, disabled) {                    // 设置按钮状态

    var data = $.data(domElem, "linkbutton");                   // 获取对象的数据
    if (disabled) {                                             // 禁用按钮
        data.options.disabled = true;
        var href = $(domElem).attr("href");                     // 获取超级连接
        if (href) {
            data.href = href;                                   // 保存原来的超级链接
            $(domElem).attr("href", "javascript:void(0)");      // 重新设置
        }
        if (domElem.onclick) {                                  // 是否有点击事件处理
            data.onclick = domElem.onclick;
            domElem.onclick = null;                             // 取消掉
        }
        var eventData = $(domElem).data("events") || $._data(domElem, 'events');
        if (eventData && eventData["click"]) {
            var clickHandlerObjects = eventData["click"];
            data.savedHandlers = [];
            for (var i = 0; i < clickHandlerObjects.length; i++) {
                if (clickHandlerObjects[i].namespace != "menu") {
                    var handler = clickHandlerObjects[i]["handler"];
                    $(domElem).unbind('click', handler);
                    data.savedHandlers.push(handler);
                }
            }
        }

        $(domElem).addClass("l-btn-disabled");                  // 使用样式
    } else {
        data.options.disabled = false;                          // 启用按钮
        if (data.href) {                                        // 恢复原来的超级链接
            $(domElem).attr("href", data.href);
        }
        if (data.onclick) {                                     // 恢复原来的点击事件处理
            domElem.onclick = data.onclick;
        }
        if (data.savedHandlers) {
            for (var i = 0; i < data.savedHandlers.length; i++) {
                $(domElem).click(data.savedHandlers[i]);
            }
        }

        $(domElem).removeClass("l-btn-disabled");
    }
}

6. 为 easyui 打个补丁

如果你希望使用压缩之后的 easyui 脚本库，对修改源代码并没有兴趣，可以到这里下载: 解决linkbutton组件disable方法无法禁用jQuery绑定事件的问题。

本文参考了世纪之光这篇文章的实现，特此感谢。

分类: javascript

javascript

学习 easyui 之四：禁用 linkbutton 问题

摘要: easyui 中的 linkbutton 可以很方便地创建按钮，还提供了启用和禁用的方法，不过，在禁用的时候，会出现一些意外的问题。本文分析了出现问题的原因，并给出了解决这个问题的思路和方法。阅读全文

posted @ 2013-05-13 23:05 冠军阅读(423) | 评论 (5) 编辑

学习 easyui 之三：panel 分析

摘要: 在 easyui 中，panel 是很基础的控件，无论是提示框，还是 DataGrid 都是从 panel 派生出来。因此，研究一下 panel 很有必要。阅读全文

posted @ 2013-04-29 21:49 冠军阅读(170) | 评论 (0) 编辑

在 MVC4 中使用 Uploadify 3.2 - 1

摘要: 网上已经有许多老版的使用说明，这可是最新版 Uploadify 3.2 ！ Uploadify 是 JQuery 一个著名的上传插件，利用 Flash 技术，Uploadify 越过浏览器的限制，控制了整个上传的处理过程，实现了客户端无刷新的文件上传，这样就实现了在客户端的上传进度控制，所以，你首先要确定浏览器中已经安装了 Adobe 的 Flash 插件。阅读全文

posted @ 2013-04-27 22:39 冠军阅读(1312) | 评论 (13) 编辑

学习 easyui 之二：jQuery 的 ready 函数和 easyloader 的加载回调函数

摘要: 使用 easyloader 的时候，必须要注意到脚本的加载时机问题，easyloader 会异步加载模块，所以，你使用的模块不一定已经加载了。阅读全文

posted @ 2013-04-23 22:25 冠军阅读(894) | 评论 (4) 编辑

学习 easyui 之一：easyloader 分析与使用

摘要: 使用脚本库总要加载一大堆的样式表和脚本文件，在 easyui 中，除了可以使用通常的方式加载之外，还提供了使用 easyloader 加载的方式。阅读全文

posted @ 2013-04-22 22:24 冠军阅读(1315) | 评论 (6) 编辑

摘要: jQuery 是一个伟大的脚本库，由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新版本，目前已经是 1.8.3版了。学习 jQuery 有许多途径，我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。如果你使用过 jQuery , 就必然使用过 ready 函数，它用来注册当页面准备好之后可以执行的函数。问题来啦，我们的页面什么时候准备好了呢？1. onload 事件最基本的处理方式就是页面的 onload 事件，我们在处理这个事件的时候，可以有多种方式，阅读全文

posted @ 2013-01-15 22:48 冠军阅读(493) | 评论 (1) 编辑

javascript 中的暗物质 - 闭包

摘要: javascript 中有一个特殊的特性 - 闭包，对于 .NET 程序员来说，比较熟悉的是面向对象的程序设计 OOP, 而来自函数式语言的闭包则显得比较诡异，许多程序员对它敬而远之。对于闭包我们还是要从函数式语言的特点说起。不知道你有没有发现，在 javascript 中没有 public ，private 之类的关键字，也没有 class ，虽然也存在对象一说，但是对象的地位远远没有在 C# 中是一等公民，在 js 中，没有对象你也可以一样写程序。它只是一种数据的表示形式而已，可有也可无。阅读全文

posted @ 2012-11-28 22:55 冠军阅读(1645) | 评论 (11) 编辑

关于使用 jBox 对话框的提交问题

摘要: jBox 是个不错的对话框组件。在 ASP.NET Form 中使用 jBox 的时候，在按钮注册的客户端点击事件中，会发现不能弹出对话框问题。表现为页面一闪就提交了，导致对话框一闪而过，甚至根本看不到。导致模式对话框失败。首先，按钮会有默认处理，对于普通的 ASP.NET 按钮来说，会导致表单的提交，提交表单导致了页面的刷新。所以，为了不提交表单，就需要阻止按钮默认的行为，这可以通过下面的代码实现。function stopDefault( e ) { // Prevent the default browser action (W3C) if ( e && e.preven阅读全文

posted @ 2012-11-04 22:20 冠军阅读(485) | 评论 (0) 编辑

id 的选择器为什么要这么写 li#first？

摘要: 看到过一篇关于 CSS 的文章，其中说到：对于类似 li#first 这样的选择器，由于使用 id 就已经可以确定元素了，没有必要再写上前面的 li, 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错，简单测试一下也没有问题。可是，我们经常看到带有元素名称的选择器，例如，在微软的项目模板中就有大量的带有元素名称的选择器，如果没有用的话，为什么要这样写呢？阅读全文

posted @ 2012-05-28 23:16 冠军阅读(2186) | 评论 (19) 编辑

jQuery DatePicker 与ASP.NET的验证控件结合 Bug 处理

摘要: 我们开发ASP.NET站点时，如果将jQuery UI Datepicker与ASP.NET的验证控件（如：RequiredFieldValidator）组合使用：<asp:TextBoxID="txtDate"runat="server"></asp:TextBox><asp:RequiredFieldValidatorID="reqDate"runat="server"ControlToValidate="txtDate"ErrorMessage="*阅读全文

posted @ 2012-04-12 22:15 冠军阅读(896) | 评论 (0) 编辑

window.parent ,window.top,window.self 详解

摘要: 转载：Js中的window.parent ,window.top,window.self 详解在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。window.self功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self注：window、self、window.self是等价的。window.top功能：返回顶层窗口，即浏览器窗口。语法：window.top注：如果窗口本身就是顶层窗口，阅读全文

posted @ 2012-03-28 23:24 冠军阅读(500) | 评论 (0) 编辑

DOM 中的事件处理

摘要: 根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现。该接口提供了 'addEventListener' 和 'removeEventListener' 方法，用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。DOM 2 Events 中定义了 Event 接口，用来提供事件的上下文信息，它提供了若干标准属性和方法。实现 Event 接口的对象一般作为第一个参数传入事件处理函数，以用来提供当前事件相关的一些信息。事件注册根据 DOM 2 Events 阅读全文

posted @ 2012-01-17 22:46 冠军阅读(452) | 评论 (1) 编辑

在 jQuery 中与 WCF 传递日期类型的参数

摘要: 通过 WCF 与页面进行 Ajax 进行数据传递非常方便，可以，遇到日期类型就不同了。WCF 通过 JavaScriptSerializer将日期格式化为特殊的格式：\/Date(1318287600+0100)\/，实际上传递到页面上的是一个字符串。而不是真正的 JavaScript 日期。同样，当浏览器想要向服务器传递日期类型的数据时也必须通过这种特殊的字符串来提供数据。为了解决这个问题，可以使用下面的方法为 jQuery 扩展一个数据转换的方法。// 为 jQuery 扩展一个解析 wcf 日期的方法jQuery.extend( { w...阅读全文

posted @ 2011-12-15 20:47 冠军阅读(549) | 评论 (0) 编辑

jQuery 中使用 JSON

摘要: JSON 格式json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它。JSON 的格式说明可以在可以这里看到，非常详细，还是中文的。JSON 格式说明需要特别注意的是，在 JSON 中的属性名是需要使用引号引起来的。jQuery 中使用 JSONjQuery 是现在使用广泛的脚本库，那么，在 jQuery 中如何使用 JSON 呢？解析 JSON在 jQuery 中已经提供了对于解析 JSON 的内在支持，jQuery.parseJSON 函数提供了解析的支持，详细的说明见这里。var obj = jQuery.parseJSON('{"na阅读全文

posted @ 2011-12-01 19:38 冠军阅读(14742) | 评论 (4) 编辑

jQuery UI - Accordion 手风琴组件的使用

摘要: 这里的例子使用 jQuery UI 1.8.6示例效果可以看 jQuery 网站中的例子。手风琴效果将多个内容组织到多个逻辑组中，通过选择组的标题可以展开或者收缩组中的内容，使用效果很像 Tab，作为备选，还可以通过将鼠标放置到标题上来展开或者收缩。使用这个组件需要引用 jQuery 脚本库，core, widget, accordion 脚本库。<script src="scripts/jquery-1.6.2.js"></script><script src="scripts/jquery.ui.core.js">阅读全文

posted @ 2011-10-18 22:07 冠军阅读(1549) | 评论 (0) 编辑

jQuery UI AutoComplete 中使用自定义的数据

摘要: 在 jQuery UI AutoComplete 中，除了直接使用字符串还可以使用自定义的数据。自定义的数据假设我们自定义的数据格式如下所示：每个数据有四个属性，我们希望取得 label 属性的值，desc 的内容被用来作为说明。icon 是一个图标，value 是准备对象的标识。var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x3阅读全文

posted @ 2011-06-18 21:38 冠军阅读(1441) | 评论 (0) 编辑

使用 jQuery UI AutoComplete

摘要: 介绍在 jQuery UI 的最近更新中增加了自动完成控件AutoComplete，这为我们提供了又一个强大的开发工具，这里介绍一下这个控件的使用方式。首先，jQuery UI 是基于 jQuery 的，所以，必须在你的页面中首先引用 jQuery 脚本库，然后再引用 jQuery UI 库，对于 jQuery UI 库来说，可以引用整个的库，也可以仅仅引用当前页面用到的库。jQuery UI 的下载地址：http://jqueryui.com/download一.基本配置一般来说，引用独立的脚本可以减小页面的尺寸，我们这里使用独立的脚本。对于 autocomplete 来说，涉及到下面的几个阅读全文

posted @ 2011-06-18 20:01 冠军阅读(1437) | 评论 (1) 编辑

使用 jQuery dataTables - 3 解析请求参数

摘要: 最近比较忙，一直没有更新，先发一篇 dataTables 参数处理。对于 dataTables 来说，当使用服务器端分页的时候，会向服务器传递多个参数，在服务器端根据这些参数来进行服务器端的分页处理。这些参数比较多，详细地说明见使用 jQuery dataTables - 2 四种数据来源。对于服务器端来说，显然需要将这些参数进行解析，以方便使用，下面的代码将请求参数解析为一个 C# 的对象，这样，服务器端就可以方便地使用这些参数了。代码由有比较详细的注释，也可以点击这里直接下载代码。using System;using System.Collections.Generic;using Sy阅读全文

posted @ 2011-03-21 18:29 冠军阅读(4311) | 评论 (5) 编辑

使用 jQuery dataTables - 2 四种数据来源

摘要: 四种数据来源对于 dataTables 来说，支持四种表格数据来源。最为基本的就是来源于网页，网页被浏览器解析为 DOM 对象，在 dataTables 中称为 DOM 来源。$(document).ready(function() { $('#example').dataTable();} );第二种数据来源为数组， JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。$(document).ready(function() { $(阅读全文

posted @ 2011-03-05 00:37 冠军阅读(9831) | 评论 (15) 编辑

使用 jQuery dataTables - 1

摘要: jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库，目前的版本是 1.7.5，下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布，所以，这里使用最新的 jQuery 1.5.1 。然后，在网页中先加入 jQuery 的引用，然后，加入 dataTable阅读全文

posted @ 2011-03-04 23:25 冠军阅读(6810) | 评论 (12) 编辑

jQuery UI dialog 的使用

摘要: 上一篇文章分享了一下 jQuery UI dialog 的简单使用，看到这么多同学都在学习，就将 jQuery UI dialog 的使用总结一下，也为学习其他的 jQuery UI 打个基础。初始化参数对于 dialog 来说，首先需要进行初始化，在调用 dialog 函数的时候，如果没有传递参数，或者传递了一个对象，那么就表示在初始化一个对话框。没有参数，表示按照默认的设置初始化对话框，在当前最新版本的 jQuery UI1.8.9 中，dialog 支持下列属性。autoOpen 初始化之后，是否立即显示对话框，默认为 truemodal 是否模式对话框，默认为 falsecloseOn阅读全文

posted @ 2011-02-16 23:24 冠军阅读(23129) | 评论 (9) 编辑

使用 jQuery UI Dialog

摘要: 今天用到了客户端的对话框，把 jQuery UI 中的对话框学习了一下。准备 jQuery 环境首先，我们创建一个按钮，点击这个按钮的时候，将会弹出一个对话框。[代码]为了设置这个按钮点击的事件，需要准备 jQuery 的环境。[代码]在 ready 中设置按钮的点击事件。[代码]确认这一步没有问题。准备对话框第二步，需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。[代码]为了使用 jQuery UI 的对话框，需要增加这些文件的引用。[代码]增加样式jQuery UI 中使用了大量的样式来修饰，需要引用 jQuery UI 的样式，注意，jquery.ui.all.css阅读全文

posted @ 2011-02-16 17:09 冠军阅读(11487) | 评论 (13) 编辑