关于jquery动态加载li时点击事件无法加载的问题

快来打我* 2022-08-19 13:17 145阅读 0赞

一开始做个操作栏，如图：

![Center][]

点击角色管理，弹出下拉框，在点击收起，点击增加角色，会通过iframe加载页面，页面样式为：

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();
    	});

以上所有问题都解决了。

[Center]: /images/20220731/8fe34644e63e45a1bd8a0f945c5471c9.png