这个问题也是群内朋友给我反馈的，jQuery Easyui 1.3.1版本diable方法的现状是能够禁用href的跳转，能够禁用写在dom的onclick属性上绑定的事件处理程序，但是不能禁用使用jQuery绑定的事件处理程序，跟这类似的还有menu的disableItem方法，所以他们的解决方案也是一致的。 对于onclick方法绑定的事件直接备份到事件列表中，enable的时候用jQuery的bind方法绑定备份的事件处理程序，所以这时候其实dom的onclick属性已经为空了，功能上却能保持一致，直接上代码了：
实现代码：
- /**
- * linkbutton方法扩展
- * @param {Object} jq
- */
- $.extend($.fn.linkbutton.methods, {
- /**
- * 激活选项（覆盖重写）
- * @param {Object} jq
- */
- enable: function(jq){
- return jq.each(function(){
- var state = $.data(this, 'linkbutton');
- if ($(this).hasClass('l-btn-disabled')) {
- var itemData = state._eventsStore;
- //恢复超链接
- if (itemData.href) {
- $(this).attr("href", itemData.href);
- }
- //回复点击事件
- if (itemData.onclicks) {
- for (var j = 0; j < itemData.onclicks.length; j++) {
- $(this).bind('click', itemData.onclicks[j]);
- }
- }
- //设置target为null，清空存储的事件处理程序
- itemData.target = null;
- itemData.onclicks = [];
- $(this).removeClass('l-btn-disabled');
- }
- });
- },
- /**
- * 禁用选项（覆盖重写）
- * @param {Object} jq
- */
- disable: function(jq){
- return jq.each(function(){
- var state = $.data(this, 'linkbutton');
- if (!state._eventsStore)
- state._eventsStore = {};
- if (!$(this).hasClass('l-btn-disabled')) {
- var eventsStore = {};
- eventsStore.target = this;
- eventsStore.onclicks = [];
- //处理超链接
- var strHref = $(this).attr("href");
- if (strHref) {
- eventsStore.href = strHref;
- $(this).attr("href", "javascript:void(0)");
- }
- //处理直接耦合绑定到onclick属性上的事件
- var onclickStr = $(this).attr("onclick");
- if (onclickStr && onclickStr != "") {
- eventsStore.onclicks[eventsStore.onclicks.length] = new Function(onclickStr);
- $(this).attr("onclick", "");
- }
- //处理使用jquery绑定的事件
- var eventDatas = $(this).data("events") || $._data(this, 'events');
- if (eventDatas["click"]) {
- var eventData = eventDatas["click"];
- for (var i = 0; i < eventData.length; i++) {
- if (eventData[i].namespace != "menu") {
- eventsStore.onclicks[eventsStore.onclicks.length] = eventData[i]["handler"];
- $(this).unbind('click', eventData[i]["handler"]);
- i--;
- }
- }
- }
- state._eventsStore = eventsStore;
- $(this).addClass('l-btn-disabled');
- }
- });
- }
- });
使用事项：
- 因为是直接覆盖linkbutton组件的diable和enable方法，所以用法不变。
- 不要再用domObj.onclick=function(){..}这种方式去绑定事件，这里未作支持
- 不要再用addEventListener或者attachEvent方法绑定事件，因为你已经用了jQuery框架
不错的代码，赞一个 😛
你好，请问个问题:
easyui linkbutton页面加载时设置属性为禁用,为何还是能响应单击事件
$(‘#btnAdd’).linkbutton({
disabled: true
}); 😛
管理员 世纪之光 : 2014年07月19日22:37:28 地下1层
easyui自身的linkbutton对禁用支持的不是很好，我这篇文章扩展的两个方式就是为了解决这个问题的。
但是仅仅通过设置disabled属性，则不是扩展方法能解决的，只能改源码，或者在组件初始化后再调用我扩展的方法
div.onclick = function(event){
console.log(‘触发事件’);
};
代码好像有问题，对于上面这种事件回调方式，51行处的代码会有问题，$(this).attr(“onclick”)返回的是undefined，所以$(this).attr(“onclick”, “”);执行不到
管理员 世纪之光 : 2015年05月07日13:24:04 地下1层
请看最后的【注意事项】的第二条。使用jquery了，就不要再用dom.onclick这样去绑定事件了。