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

最新推荐文章于 2020-07-30 16:30:27 发布

天使没吃饱

最新推荐文章于 2020-07-30 16:30:27 发布

阅读量8.2k

点赞数 1

分类专栏： js/jquery 文章标签：动态加载点击事件无法加载的问题

本文链接：https://blog.csdn.net/u011493599/article/details/50527058

版权

js/jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

点击角色管理，弹出下拉框，在点击收起，点击增加角色，会通过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();
	});

以上所有问题都解决了。