关于jquery动态加载li时点击事件无法加载的问题
来源:互联网 发布:网络和共享中心打不开 编辑:程序博客网 时间:2024/05/27 18:17
一开始做个操作栏,如图:
点击角色管理,弹出下拉框,在点击收起,点击增加角色,会通过iframe加载页面,页面样式为:
<ul class="nav-stacked"><li><div><a><i class='icon-edit'></i><span>角色管理</span><i class='icon-angle-down'></i></a></div><ul><li><p src="/add.do"><i class='icon-edit'></i><span>增加角色</span></p></li><li><p src="/role/modular.do"><i class='icon-edit'></i><span>模块管理</span></p></li></ul></li></ul>
js为:
$(".nav-stacked li > div").on('click',function(){$(this).siblings("ul").slideToggle();});$(".nav-stacked li ul li ").on('click',function(){// 增加Tab页面开始tabName=$(this).find("span").text();src=$(this).find("p").attr("src");$(".page").html("<iframe class='tabIframe' src='"+src+"'></iframe>");// $(this).siblings("li").find("span").removeClass("tabNavCurrent");$(this).parents("ul").find("li span,li i").removeClass("tabNavCurrent");$(this).find("span,i").addClass("tabNavCurrent");// 增加Tab页面结束if(arryTabNames.indexOf(tabName)>-1){}else{arryTabNames.push(tabName);arraySrcs.push(src);console.log(arraySrcs);console.log(arryTabNames);// 增加tabNav$("#tabNavIndex").before("<a class='tabBtn'><span>"+tabName+"</span><i class='icon-remove'></i></a>");}var tabNameColor=arryTabNames.indexOf(tabName);var tabNameArray=$(".tabW .tabBtn span");$(tabNameArray[tabNameColor+1]).addClass("tabNavCurrent");$(tabNameArray[tabNameColor+1]).parents("a").siblings().find("span").removeClass("tabNavCurrent");});
当html代码是直接写到jsp里的时候,上面的功能没问题。当我想要将操作栏动态加载,从数据库读的时候,从数据库加载数据的jquery:
$(function(){var roleId=${roleId};$.ajax({url:"/selectAllModular.do",data:{"roleId":roleId},dataType:'json',success:function(data){var n=data.num;var objs="";var footLi="";var parentId=-1;var modularHeadBef="<div><a><i class='icon-edit'></i><span>";var modularHeadLas="</span><i class='icon-angle-down'></i></a></div>";var modularFootHead="<li><p src='";var modularFootMidd="'><i class='icon-edit'></i><span>";var modularFootLast="</span></p></li>";$.each(data.list,function(index,modular){parentId=-1;var obj="";footLi="";if(modular.parentModularId==0){obj=modularHeadBef+modular.modularName+modularHeadLas;parentId=modular.modularId;$.each(data.list,function(index,modular){if(modular.parentModularId==parentId){footLi+=modularFootHead+modular.action+modularFootMidd+modular.modularName+modularFootLast;}})footLi="<ul>"+footLi+"</ul>";objs=obj+footLi;}if(footLi!=""){objs="<li>"+objs+"</li>";$(".nav-stacked").append(objs);}})}})})
在页面加载上面的代码,问题出现了,点击角色管理没有反应,
原因:jquery对动态的li添加click事件时,不能使用on,应该使用delegate,我修改了jquery:
$(".nav-stacked").delegate('li','click',function(){$(this).siblings("ul").slideToggle();});<pre name="code" class="javascript">$(".nav-stacked li ul").delegate('li','click',function(){// 增加Tab页面开始tabName=$(this).find("span").text();src=$(this).find("p").attr("src");$(".page").html("<iframe class='tabIframe' src='"+src+"'></iframe>");// $(this).siblings("li").find("span").removeClass("tabNavCurrent");$(this).parents("ul").find("li span,li i").removeClass("tabNavCurrent");$(this).find("span,i").addClass("tabNavCurrent");// 增加Tab页面结束if(arryTabNames.indexOf(tabName)>-1){}else{arryTabNames.push(tabName);arraySrcs.push(src);console.log(arraySrcs);console.log(arryTabNames);// 增加tabNav$("#tabNavIndex").before("<a class='tabBtn'><span>"+tabName+"</span><i class='icon-remove'></i></a>");}var tabNameColor=arryTabNames.indexOf(tabName);var tabNameArray=$(".tabW .tabBtn span");$(tabNameArray[tabNameColor+1]).addClass("tabNavCurrent");$(tabNameArray[tabNameColor+1]).parents("a").siblings().find("span").removeClass("tabNavCurrent");});
修改完成后,点击角色管理,下拉框出来了,但是点击增加角色时,下拉框收起了,没有触发点击事件。
原因,delegate采用冒泡机制,父类事件也会绑定到子类上。
解决方法:
$(".nav-stacked").delegate('li','click',function(event){$(this).siblings("ul").slideToggle();event.stopPropagation();}
冒泡问题解决,但是点击增加角色click事件还是无法加载
解决方法:
$(".nav-stacked").delegate('li','click',function(event){$(this).children("ul").slideToggle( function(){$(".nav-stacked li ul").delegate('li','click',function(){// 增加Tab页面开始tabName=$(this).find("span").text();src=$(this).find("p").attr("src");$(".page").html("<iframe class='tabIframe' src='"+src+"'></iframe>");// $(this).siblings("li").find("span").removeClass("tabNavCurrent");$(this).parents("ul").find("li span,li i").removeClass("tabNavCurrent");$(this).find("span,i").addClass("tabNavCurrent");// 增加Tab页面结束if(arryTabNames.indexOf(tabName)>-1){}else{arryTabNames.push(tabName);arraySrcs.push(src);console.log(arraySrcs);console.log(arryTabNames);// 增加tabNav$("#tabNavIndex").before("<a class='tabBtn'><span>"+tabName+"</span><i class='icon-remove'></i></a>");}var tabNameColor=arryTabNames.indexOf(tabName);var tabNameArray=$(".tabW .tabBtn span");$(tabNameArray[tabNameColor+1]).addClass("tabNavCurrent");$(tabNameArray[tabNameColor+1]).parents("a").siblings().find("span").removeClass("tabNavCurrent");});});event.stopPropagation();});以上所有问题都解决了。
2 0
- 关于jquery动态加载li时点击事件无法加载的问题
- android webview 加载重定向页面时点击无法回退,导致重复加载当前页面问题的解决方案
- 关于Webview在RecyclerView的第一个条目中,第一次加载时点击回顶部的问题
- 关于jQuery双事件多重加载的问题。
- 关于动态加载控件 事件触发的问题
- 动态生成 ul 的li jquery 点击事件无法获取到li
- jquery 动态加载的元素绑定事件
- Android WebView加载带有Input的输入框时点击无法弹出软键盘的问题解决
- jQuery.on() 函数详解--解决动态加载的标签无法绑定点击事件
- 解决无法动态加载styleable的问题
- 二级ul li元素动态加载click事件
- 关于Iframe无法加载的问题
- 关于webview图片无法加载的问题?
- Jquery本地无法加载问题
- jQuery -- Swiper插件使用ajax动态加载数据出现无法滑动的问题
- extjs 关于js的动态加载问题
- 关于动态加载datagrid url的问题
- Jquery 动态加载数据问题
- java(13)--配置https加密连接器并生成数字证书
- 手把手教你玩转网络编程模型之完成例程(Completion Routine)篇(下)-转
- 权限管理部分的一些设计与想法
- kubernetes学习笔记----- Go语言中structTag
- 完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三 1-转
- 关于jquery动态加载li时点击事件无法加载的问题
- JAVA解决乱码之道
- mapreduce yarn 的job提交流程
- HBase Memstore
- 图集
- 馨瑶
- asp.net站点500.12错误解决办法
- 完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三2-转
- 什么是模型,什么是模式