js动态添加元素为何点击事件无效

最新推荐文章于 2024-11-01 19:55:28 发布

原创最新推荐文章于 2024-11-01 19:55:28 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文通过一个简单的HTML示例介绍了如何使用JavaScript动态修改DOM并为元素添加事件监听器。特别强调了当动态添加元素时，需要手动为这些新元素绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来觉得不用提的，但是发现最近几个朋友在提，而且新来的小兄弟也有点迷糊这个，所以就简单说说，

看看下面的代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.a {width: 100px;height: 100px;	background: #000;margin: 10px;
		}
	</style>

	<body>
		<button onclick="showbtn()">展示</button>
		<button onclick="adda()">增加</button>
		<div class="a"></div>
		<div class="a"></div>
		<div class="a"></div>

	</body>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
	<script>
		function showbtn(){
			alert('共计class为a的有：'+document.querySelectorAll(".a").length);
		}
		function adda(){
			$("body").append("<div class='a'>aaa</div>")
		}
		$(".a").each(function(index){
			$(this).bind("click",function(){
				alert("这是排下来的第"+index+'个');
			})
		})
	</script>

</html>