jquery中click点击事件嵌套后多次触发的解决方案

最新推荐文章于 2024-04-04 00:19:46 发布

lqdcanty

最新推荐文章于 2024-04-04 00:19:46 发布

阅读量2.2w

点赞数 2

分类专栏：学习日记

本文链接：https://blog.csdn.net/licanty/article/details/72828434

版权

学习日记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先讲讲我遇到这个问题的时候，我最开始想到的是阻止事件冒泡，想了一下好像没有什么关系的，最后决定还是动手做做看，放到项目中试了试确实是没有什么关系的，傻眼了怎么办，来讲讲我的亲身体验吧！

产生此种小姑的原因：jQuery中的click事件会累计绑定，所以我们可以在下次点击前先解绑；

1.一个接单的例子

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	#box{
		width: 100px;
		height: 100px;
		border: 1px solid red; 
	}
	#div{
		width: 50px;
		height: 50px;
		border: 1px solid green; 
		margin-left: 25px;
		margin-top: 25px;
	}
</style>
<body>
<div id="box">
	<div id="div">
		
	</div>
</div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
	 $("#box").click(function(){
	 	
        $("#div").unbind("click").click(function(){
          alert("内层div");
        });
 }); 
</script>
</body>
</html>

这个例子很简单，直接在下次下次点击前先解绑即可；但是问题又来了，如果是动态加载的dom的节点上绑定点击事件呢，我们一般解决动态加载也绑定上点解事件一般会用到事件委托，把点击委托到一个不会变的的父级上；在un-click_in里面动态加载数据，让数据也具有点击事件；

比如

在说说解绑的事,在一个比较大的项目中会存在很多的类似的事件委托和点击嵌套，如果要都委托到一个div上，一旦下面的事件解绑，那么原来的其他绑定事件就不复存在，所以我上面连写三个div就是解决这个问题的，可以把不同的点击事件委托到不同的div上就可，如下图。

到这里已经完美解决了；

lqdcanty

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
jquery中click点击事件嵌套后多次触发的解决方案

首先讲讲我遇到这个问题的时候，我最开始想到的是阻止事件冒泡，想了一下好像没有什么关系的，最后决定还是动手做做看，放到项目中试了试确实是没有什么关系的，傻眼了怎么办，来讲讲我的亲身体验吧！产生此种小姑的原因：jQuery中的click事件会累计绑定，所以我们可以在下次点击前先解绑；1.一个接单的例子 #box{ width: 100px; height:
复制链接

扫一扫