js 新追加的元素点击事件没触发

2021-05-07 22:03:53 阅读：202 来源： 互联网

常见情况：
监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。

例如：

<html><head>
	<title>Testtitle>
	<style type="text/css">
		.divs{
			height: 100px;
			width: 100px;
			background-color: red;
			margin: 20px;
		}
	style>head><body>
	<div class="page">
		<div class="divs">div>
	div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
	<script type="text/javascript">
		var str = '';
		$('.divs').on('click',function(){
			console.log("点击第"+($(this).index()+1)+"个红框，新追加了一个新的元素")
			$('.page').append(str);
		})
	script>body>html>

在这里插入图片描述

点击第一个红框，追加一个红框，但是点击第二个红框的时候并没有追加效果。

原因：
新追加的元素开始的时候是没有绑定之前的监听事件，所以点击无效。
尝试在追加元素之后，将该元素进行绑定同一个类的监听事件，实现无限克隆

<html><head>
	<title>Testtitle>
	<style type="text/css">
		.divs{
			height: 100px;
			width: 100px;
			background-color: red;
			margin: 20px;
		}
	style>head><body>
	<div class="page">
		<div class="divs">div>
	div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
	<script type="text/javascript">
		var str = '';

		bind();
		function bind(){
			//off是解除jQ的点击事件然后再重新绑定点击事件，重复绑定会触发事件多次
			$('.divs').off('click').on('click',function(){
				console.log("点击第"+($(this).index()+1)+"个红框，新追加了一个新的元素")
				$('.page').append(str);
				bind();
			})
		}
	script>body>html>

在这里插入图片描述

标签：触发,红框,元素,100px,js,点击,追加,divs
来源： https://blog.51cto.com/u_14175378/2759926

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 新追加的元素点击事件没触发