解决linkbutton组件disable方法无法禁用jQuery绑定事件的问题

现在的位置: 首页 > easyui > Menu > linkbutton > 正文

2012年12月20日 ⁄ linkbutton ⁄ 共 3053字 ⁄ 评论数 5 ⁄ 被围观 21,615 views+

文章目录

这个问题也是群内朋友给我反馈的，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框架

作者: 世纪之光

该日志由世纪之光于6年前发表在linkbutton分类下
转载请注明: 解决linkbutton组件disable方法无法禁用jQuery绑定事件的问题 | WebUI框架使用参考 +复制链接
关键字: disable方法无效

【上篇】jQuery获取DOM绑定事件问题
【下篇】扩展:datagrid鼠标经过提示单元格内容

您可能还会对这些文章感兴趣！

目前有 5 条留言其中：访客:3 条, 博主:2 条

superdaxia : 2013年08月02日13:37:20 -49楼 @回复回复

不错的代码，赞一个 😛
davidhuang : 2014年07月17日14:35:42 -48楼 @回复回复

你好，请问个问题:
easyui linkbutton页面加载时设置属性为禁用,为何还是能响应单击事件
$(‘#btnAdd’).linkbutton({
disabled: true
}); 😛
- 管理员 世纪之光 : 2014年07月19日22:37:28 地下1层 @回复回复
  
  easyui自身的linkbutton对禁用支持的不是很好，我这篇文章扩展的两个方式就是为了解决这个问题的。
  但是仅仅通过设置disabled属性，则不是扩展方法能解决的，只能改源码，或者在组件初始化后再调用我扩展的方法
zzzz3621 : 2015年05月05日13:59:02 -47楼 @回复回复

div.onclick = function(event){
console.log(‘触发事件’);
};

代码好像有问题，对于上面这种事件回调方式，51行处的代码会有问题，$(this).attr(“onclick”)返回的是undefined，所以$(this).attr(“onclick”, “”);执行不到
- 管理员 世纪之光 : 2015年05月07日13:24:04 地下1层 @回复回复
  
  请看最后的【注意事项】的第二条。使用jquery了，就不要再用dom.onclick这样去绑定事件了。