现在的位置: 首页 > easyui > Menu > linkbutton > 正文
解决linkbutton组件disable方法无法禁用jQuery绑定事件的问题
2012年12月20日 linkbutton ⁄ 共 3053字 评论数 5 ⁄ 被围观 19,601 views+
文章目录
[隐藏]

这个问题也是群内朋友给我反馈的,jQuery Easyui 1.3.1版本diable方法的现状是能够禁用href的跳转,能够禁用写在dom的onclick属性上绑定的事件处理程序,但是不能禁用使用jQuery绑定的事件处理程序,跟这类似的还有menu的disableItem方法,所以他们的解决方案也是一致的。 对于onclick方法绑定的事件直接备份到事件列表中,enable的时候用jQuery的bind方法绑定备份的事件处理程序,所以这时候其实dom的onclick属性已经为空了,功能上却能保持一致,直接上代码了:

实现代码:

  1. /**
  2.  * linkbutton方法扩展
  3.  * @param {Object} jq
  4.  */
  5. $.extend($.fn.linkbutton.methods, {
  6.     /**
  7.      * 激活选项(覆盖重写)
  8.      * @param {Object} jq
  9.      */
  10.     enable: function(jq){
  11.         return jq.each(function(){
  12.             var state = $.data(this, 'linkbutton');
  13.             if ($(this).hasClass('l-btn-disabled')) {
  14.                 var itemData = state._eventsStore;
  15.                 //恢复超链接
  16.                 if (itemData.href) {
  17.                     $(this).attr("href", itemData.href);
  18.                 }
  19.                 //回复点击事件
  20.                 if (itemData.onclicks) {
  21.                     for (var j = 0; j < itemData.onclicks.length; j++) {
  22.                         $(this).bind('click', itemData.onclicks[j]);
  23.                     }
  24.                 }
  25.                 //设置target为null,清空存储的事件处理程序
  26.                 itemData.target = null;
  27.                 itemData.onclicks = [];
  28.                 $(this).removeClass('l-btn-disabled');
  29.             }
  30.         });
  31.     },
  32.     /**
  33.      * 禁用选项(覆盖重写)
  34.      * @param {Object} jq
  35.      */
  36.     disable: function(jq){
  37.         return jq.each(function(){
  38.             var state = $.data(this, 'linkbutton');
  39.             if (!state._eventsStore)
  40.                 state._eventsStore = {};
  41.             if (!$(this).hasClass('l-btn-disabled')) {
  42.                 var eventsStore = {};
  43.                 eventsStore.target = this;
  44.                 eventsStore.onclicks = [];
  45.                 //处理超链接
  46.                 var strHref = $(this).attr("href");
  47.                 if (strHref) {
  48.                     eventsStore.href = strHref;
  49.                     $(this).attr("href""javascript:void(0)");
  50.                 }
  51.                 //处理直接耦合绑定到onclick属性上的事件
  52.                 var onclickStr = $(this).attr("onclick");
  53.                 if (onclickStr && onclickStr != "") {
  54.                     eventsStore.onclicks[eventsStore.onclicks.length] = new Function(onclickStr);
  55.                     $(this).attr("onclick""");
  56.                 }
  57.                 //处理使用jquery绑定的事件
  58.                 var eventDatas = $(this).data("events") || $._data(this, 'events');
  59.                 if (eventDatas["click"]) {
  60.                     var eventData = eventDatas["click"];
  61.                     for (var i = 0; i < eventData.length; i++) {
  62.                         if (eventData[i].namespace != "menu") {
  63.                             eventsStore.onclicks[eventsStore.onclicks.length] = eventData[i]["handler"];
  64.                             $(this).unbind('click', eventData[i]["handler"]);
  65.                             i--;
  66.                         }
  67.                     }
  68.                 }
  69.                 state._eventsStore = eventsStore;
  70.                 $(this).addClass('l-btn-disabled');
  71.             }
  72.         });
  73.     }
  74. });

使用事项:

  • 因为是直接覆盖linkbutton组件的diable和enable方法,所以用法不变。
  • 不要再用domObj.onclick=function(){..}这种方式去绑定事件,这里未作支持
  • 不要再用addEventListener或者attachEvent方法绑定事件,因为你已经用了jQuery框架

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

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

    不错的代码,赞一个 😛

  2. davidhuang : 2014年07月17日14:35:42  -48楼 @回复 回复

    你好,请问个问题:
    easyui linkbutton页面加载时设置属性为禁用,为何还是能响应单击事件
    $(‘#btnAdd’).linkbutton({
    disabled: true
    }); 😛


    • 管理员
      世纪之光 : 2014年07月19日22:37:28  地下1层 @回复 回复

      easyui自身的linkbutton对禁用支持的不是很好,我这篇文章扩展的两个方式就是为了解决这个问题的。
      但是仅仅通过设置disabled属性,则不是扩展方法能解决的,只能改源码,或者在组件初始化后再调用我扩展的方法

  3. 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这样去绑定事件了。

给我留言

留言无头像?


×