一开始做个操作栏,如图:
点击角色管理,弹出下拉框,在点击收起,点击增加角色,会通过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();
});
以上所有问题都解决了。