easyui-menu 解决disableItem不能禁用绑定事件的方法

版本:1.4.

menu的disableItem方法不能禁用使用onClick方式绑定的事件。

解决思路如下:

重写disableItem方法和enableItem方法。

/**
 * menu方法扩展
 * @param {Object} jq
 * @param {Object} itemEl
 */
$.extend($.fn.menu.methods, {
    /**
     * 激活选项(覆盖重写)
     * @param {Object} jq
     * @param {Object} itemEl
     */
    enableItem : function(jq, itemEl) {
        return jq.each(function(){
            var jqElements = $(itemEl);
            var state = $.data(this, ‘menu‘);
            if (jqElements.length > 0) {
                jqElements.each(function(){
                    if ($(this).hasClass(‘menu-item-disabled‘)) {
                        for(var i=0; i<state._eventsStore.length; i++){
                            var itemData = state._eventsStore[i];
                            if(itemData.target == this){
                                //恢复超链接
                                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(‘menu-item-disabled‘);
                            }
                        }
                    }
                });
            }
        });
    },
    /**
     * 禁用选项(覆盖重写)
     * @param {Object} jq
     * @param {Object} itemEl
     */
    disableItem : function(jq, itemEl) {
        return jq.each(function() {
            var jqElements = $(itemEl);
            var state = $.data(this,‘menu‘);
            if (jqElements.length > 0) {
                if (!state._eventsStore)
                    state._eventsStore = [];
                jqElements.each(function(){
                    if (!$(this).hasClass(‘menu-item-disabled‘)) {
                        var backStore = {};
                        backStore.target = this;
                        backStore.onclicks = [];
                        //处理超链接
                        var strHref = $(this).attr("href");
                        if (strHref) {
                            backStore.href = strHref;
                            $(this).attr("href", "javascript:void(0)");
                        }
                        //处理直接耦合绑定到onclick属性上的事件
                        var onclickStr = $(this).attr("onclick");
                        if (onclickStr && onclickStr != "") {
                            backStore.onclicks[backStore.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") {
                                    backStore.onclicks[backStore.onclicks.length] = eventData[i]["handler"];
                                    $(this).unbind(‘click‘, eventData[i]["handler"]);
                                    i--;
                                }
                            }
                        }
                        //遍历_eventsStore数组,如果有target为null的元素,则利用起来
                        var isStored = false;
                        for(var j=0; j<state._eventsStore.length; j++){
                            var itemData = state._eventsStore[j];
                            if(itemData.target==null){
                                isStored = true;
                                state._eventsStore[j] = backStore;
                            }
                        }
                        //没有现成的,则push进去
                        if(isStored==false){
                            state._eventsStore[state._eventsStore.length] = backStore;
                        }
                        $(this).addClass(‘menu-item-disabled‘);
                    }
                });
            }
        });
    }
});

  转自:http://www.easyui.info/archives/373.html

时间: 2024-10-11 18:29:58

easyui-menu 解决disableItem不能禁用绑定事件的方法的相关文章

JavaScript中,有三种常用的绑定事件的方法

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中:

JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="

201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建 var model_1 = new Backbone.Model({'name':'hello'}); var model_2 = new Backbone.Model({'name':'hi'}); var models = new Backbone.Collection(); models.add( model_1 ); models.add( model_2 ); alert( JSON.stringify(models) ); 二. 实例化模型 var M = Backbo

jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 1 <div id="testdiv"> 2 <ul></ul> 3 </div> 需要给<ul>里面动态添加的

vue form表单绑定事件与方法

使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click="say('I love you')">say</button><br /> 访问原生事件 <button @click="do('Nihao',$event)">do</button><br /> 事

Android studio button 按钮 四种绑定事件的方法

package com.geli_2.sujie.sujiegeili2testbutton; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.Toast; public class MainActivity extends AppCompa

easyui - 给textbox,datagrid中的编辑器,或者各种模块绑定事件的方法。

首先我的需求是在数据表格中的一个编辑器添加一个keyup事件,查看文档.编辑器和textbox中都没有这样的事件. 按照文档中编辑器的的说明 ed.target或者$(ed.target)可以获得目标编辑器的jQuery对象. 所以很自然的想到了 $(ed.target).on("keyup",function () { 或者 $(ed.target).bind("keyup",function () { $(ed.target).keyup(); 但结果都不行,如

jQuery给动态添加生成的元素绑定事件的方法

<div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li>标签添加click事件 jquery 1.7版以前使用live动态绑定事件 $("#testdiv ul li").live("click",function(){ }); jquery 1.7版以后使用on动态绑定事件 $("#testdiv ul&qu

[jquery] 给动态生成的元素绑定事件 on方法

用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(document).on("click",'.del',function(){ alert('aa'); }); // 成功!!