子洋丶 2021-03-25 16:06 采纳率: 100%
浏览 55
已采纳

Jquery on 绑定事件后,点击事件存在问题

背景

这是在项目上遇到的一个问题,我在这里做了个简单的 Demo将问题复现,可以复制下来直接打开测试。

问题:

jq 通过  on 绑定点击事件,在事件中获取值插入到该元素,所有触发过点击事件的元素都会重复触发,导致数据会同时改变。

图例:

如下图,我先点击第一个框,插入值 aaaa

又新建一个一个框,插入bbbb,第一个框也会被同时修改。

测试:

本来一开始,我认为是元素获取不准确,但后来测试发现不是

在通过点击事件监听了一下触发次数发现,他会依次触发之前触发过的元素

下面就是问题代码,jq用的CDN,可以直接拿来运行 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style type="text/css">
		.style{
			width: 300px;
			height: 50px;
			border: 1px solid red;
		}
		#add{
			width:40px;
			height: 40px;
			border:1px solid green;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			position: absolute;	
			top:10px;
			left:350px;
		}
	</style>
</head>
<body>
	<div id="test">
		<div>
			<ul>
				<li class="style"></li>
			</ul>
		</div>
	</div>
	<div id="add">添加</div>
	<div id="list" >
		<ul>
			<li>aaaaaa</li>
			<li>bbbbbb</li>
			<li>cccccc</li>
			<li>dddddd</li>
			<li>eeeeee</li>
			<li>ffffff</li>
		</ul>
	</div>

	<script type="text/javascript">
		const ele = '<li class="style"></li>'

		$('#test').on('click','li',function(){
			const _this = this;

			let id = 1;
			$('#list > ul > li').click(function(){
				console.log(id++);
				$(_this).text($(this).text());
			});

			console.log('-----------------');
		});

		$('#add').click(function(){
			$('#test > div > ul').append(ele)
		})
	</script>
</body>
</html>

求教!!!

  • 写回答

2条回答 默认 最新

  • 暖光_& 2021-03-25 16:27
    关注

    <script type="text/javascript">
                const ele = '<li class="style"></li>'
                var _this = null;
                $('#test').on('click', 'li', function() {
                    _this = this;
                    console.log('-----------------');
                });

                $('#list > ul > li').click(function() {                
                    _this && $(_this).text($(this).text());        
                });

                $('#add').click(function() {
                    $('#test > div > ul').append(ele)
                })
            </script>

    不知道你要的是不是这个效果,你看看是不是这样

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 ios 新安装app收不到fcm推送
  • ¥15 有没有实力的写手?有过成品的优先
  • ¥15 图像信息库的建立与识别
  • ¥15 韩国网站购物,KG支付的支付回调如何解决
  • ¥15 workstation导入ovf文件,报错,怎么解决呢?
  • ¥15 关于#c语言#的问题:构成555单稳态触发器,采用LED指示灯延时时间,对延时时间进行测量并显示(如楼道声控延时灯)需要Proteus仿真图和C语言代码
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,怎样解决呢?
  • ¥50 如何用单纯形法寻优不能精准找不到给定的参数,并联机构误差识别,给定误差有7个?matlab
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,没有XFS,怎样解决呢?
  • ¥15 应用商店如何检测在架应用内容是否违规?