關於jquery動態載入li時點選事件無法載入的問題
阿新 • • 發佈:2019-02-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();
});
以上所有問題都解決了。