easyUI 导航栏动态生成时绑定事件不相应
来源:互联网 发布:valk魔方淘宝官网 编辑:程序博客网 时间:2024/03/29 16:03
一个困扰两天的问题。demo取的是easyUI官网上的例子。
最近在接触easyUI轻量级框架的时候,看到一个模板款式蛮好看的。
一个标准的 分为North ,south,west以及center 在生成导航栏时。顿时来了兴趣,查看前台html源码
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." /><title>EasyUI Web Admin Power by Wuyeguo</title><link rel="stylesheet" type="text/css" href="easyui/1.3.4/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="css/wu.css" /><link rel="stylesheet" type="text/css" href="css/icon.css" /><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="easyui/1.3.4/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="index.js"></script></head><body class="easyui-layout"><!-- begin of header --><div class="wu-header" data-options="region:'north',border:false,split:true"> <div class="wu-header-left"> <h1>EasyUI Web Admin</h1> </div> <div class="wu-header-right"> <p><strong class="easyui-tooltip" title="2条未读消息">admin</strong>,欢迎您!</p> <p><a href="#">网站首页</a>|<a href="#">支持论坛</a>|<a href="#">帮助中心</a>|<a href="#">安全退出</a></p> </div> </div> <!-- end of header --> <!-- begin of sidebar --><div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'"> <!--class="easyui-accordion" data-options="border:false,fit:true" --> <div id="sampleDiv" class="easyui-accordion" data-options="border:false,fit:true" > <!----> <div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="temp/layout-2.html" iframe="0">菜单导航</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">用户管理</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">角色管理</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">数据字典</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">系统参数</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">操作日志</a></li> </ul> </div> <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> <div title="商品管理" data-options="iconCls:'icon-creditcards'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> <div title="订单管理" data-options="iconCls:'icon-cart'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> <div title="广告管理" data-options="iconCls:'icon-bricks'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> <div title="报表中心" data-options="iconCls:'icon-chart-curve'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> <div title="系统设置" data-options="iconCls:'icon-wrench'" style="padding:5px;"> <ul class="easyui-tree wu-side-tree"> <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li> </ul> </div> </div> </div> <!-- end of sidebar --> <!-- begin of main --> <div class="wu-main" data-options="region:'center'"> <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true"> <div title="首页" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div> </div> </div> <!-- end of main --> <!-- begin of footer --><div class="wu-footer" data-options="region:'south',border:true,split:true"> © 2013 Wu All Rights Reserved </div> <!-- end of footer </body></html>
那我们能不能动态生成
自己按照源码写了一段js中生成导航的代码。查EasyUI 官网的API
代码实例:
开始做测试
- $('#aa').accordion('add', {
- title: 'New Title',
- content: 'New Content',
- selected: false
- });
jQuery(function($) { $("#sampleDiv").accordion('add',{title: 'New Title',content: "<ul class='easyui-tree wu-side-tree'>" +"<li iconCls='icon-chart-organisation' ><a href='javascript:void(0)' data-icon='icon-chart-organisation' data-link='resources/temp/layout-2.html' iframe='0'>菜单导航1</a></li>" +"<li iconCls='icon-chart-organisation'><a href='javascript:void(0)' data-icon='icon-chart-organisation' data-link='resources/temp/layout-2.html' iframe='0'>菜单导航2</a></li>"+"</ul>",selected: true});});
OK 乍一看成型了.
然后去绑定点击事件。
$('.wu-side-tree a').bind("click",function(){ var title = $(this).text();var url = $(this).attr('data-link');var iconCls = $(this).attr('data-icon');var iframe = $(this).attr('iframe')==1?true:false;addTab(title,url,iconCls,iframe);});其中addTab() 是在中间的panel中添加的页面的事件。
但是还没来得及往下走就卡主了。因为竟然无法扑捉这个clinic事件。 一开始自己认为是不是哪里写错了,于是就在click 下面alert了一句话。
$('.wu-side-tree a').bind("click",function(){alert("click this");var title = $(this).text();var url = $(this).attr('data-link');var iconCls = $(this).attr('data-icon');var iframe = $(this).attr('iframe')==1?true:false;addTab(title,url,iconCls,iframe);});但是奇怪的是 用页面写的可以捕捉到这个事件,用js动态生成的竟然怎么也捕捉不到这个事件。如下:
我了个乖乖 真是服了。后来公司有项目就开始忙了,就把这事情放一边了。 两天后睡觉的时候突然想到这个事件,会不会是在动态生成的时候 没渲染完成就去添加这个事件的捕捉了呢、换句话说要绑定这个click事件,首先要把页面渲染好 。
想到了这个问题后 用想到 EasyUI 有个Parser解析器,详见 http://www.jeasyui.net/plugins/150.html
里面有个
$.parser.onCompletecontext当解析器完成解析动作的时候触发。$.parser.onComplete = function () { $('.wu-side-tree a').bind("click",function(){alert("click this");var title = $(this).text();var url = $(this).attr('data-link');var iconCls = $(this).attr('data-icon');var iframe = $(this).attr('iframe')==1?true:false;addTab(title,url,iconCls,iframe);}); }没有问题。能绑定了。接下去我们继续
/*** Name 载入树形菜单 */$('#wu-side-tree').tree({url:'temp/menu.php',cache:false,onClick:function(node){var url = node.attributes['url'];if(url==null || url == ""){return false;}else{addTab(node.text, url, '', node.attributes['iframe']);}}});/*** Name 选项卡初始化*/$('#wu-tabs').tabs({tools:[{iconCls:'icon-reload',border:false,handler:function(){$('#wu-datagrid').datagrid('reload');}}]});/*** Name 添加菜单选项* Param title 名称* Param href 链接* Param iconCls 图标样式* Param iframe 链接跳转方式(true为iframe,false为href)*/var addTab=function (title, href, iconCls, iframe){var tabPanel = $('#wu-tabs');if(!tabPanel.tabs('exists',title)){var content = '<iframe scrolling="auto" frameborder="0" src="'+ href +'" style="width:100%;height:100%;"></iframe>';if(iframe){tabPanel.tabs('add',{title:title,content:content,iconCls:iconCls,fit:true,cls:'pd3',closable:true});}else{tabPanel.tabs('add',{title:title,href:href,iconCls:iconCls,fit:true,cls:'pd3',closable:true});}}else{tabPanel.tabs('select',title);}}/*** Name 移除菜单选项*/var removeTab=function (){var tabPanel = $('#wu-tabs');var tab = tabPanel.tabs('getSelected');if (tab){var index = tabPanel.tabs('getTabIndex', tab);tabPanel.tabs('close', index);}}
大功告成了。
具体的index.js 见 http://download.csdn.net/download/u011954243/9910432
阅读全文
1 0
- easyUI 导航栏动态生成时绑定事件不相应
- 动态生成的html绑定click事件没有效果不执行 click事件重复绑定问题
- ul li datalist控件导航栏动态绑定数据库,并且显示相应的内容
- JS动态生成HTML时,on不能绑定事件
- 动态生成dom元素时发生的重复绑定事件
- easyUI 动态生成表头,与动态绑定数据,实现代码
- 为动态生成节点绑定事件
- 动态生成Ext GUI及绑定事件
- 动态生成按钮并绑定事件
- jquery动态生成的元素绑定事件
- jquery 为动态生成元素绑定事件
- 动态生成表单如何绑定事件:
- js动态生成的元素绑定事件
- jquery动态生成元素绑定事件
- innerHtml动态生成button并绑定事件
- EasyUI+js实现动态加载导航栏
- easyui-textbox绑定事件
- 动态生成HTML事件不生效解决办法
- Zhu and 772002 HDU
- 技术文章 | 大数据时代_如何利用数据来提升设计?
- iOS之《Effective Objective-C 2.0》读书笔记(7)
- 深入浅出理解JavaScript的闭包概念
- XMind Cloud相关问题解答
- easyUI 导航栏动态生成时绑定事件不相应
- IJKPlayer简析
- web前端面试题
- Python的zip函数妙用,旋转矩阵
- 料理机器人!有哪些黑科技改变了家庭生活?
- XAMPP使用细节 修改mysql密码
- linux下自创网络编程聊天室(2)
- (哈夫曼树)Entropy--HDOJ
- LoadRunner 函数之 web_add_cookie写法