JQ动态绑定

最新推荐文章于 2022-10-29 21:13:49 发布

原创最新推荐文章于 2022-10-29 21:13:49 发布 · 789 阅读

0 ·

CC 4.0 BY-SA版权

本文对比分析了静态绑定与动态绑定在事件处理上的差异，通过实例演示了两种绑定方式的效果。静态绑定仅对现有元素生效，而动态绑定能覆盖新增元素。

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

动态绑定与静态绑定的区别图示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态绑定与静态绑定的区别</title>
		<script src="js/jquery.min.js"></script>
		<style>
			.change{
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>初始内容1</p>
			<p>初始内容2</p>
			<p>初始内容3</p>
		</div>
	</body>
	<script>
		$(function(){
//			jing();
			dong();
		});
		function jing(){
			$("p").on("click",function(){
				$("div").append("<p>生成的内容</p>")
				$(this).addClass("change");
			})
		}
		function dong(){
			$("div").on("click","p",function(){
				$("div").append("<p>生成的内容</p>")
				$(this).addClass("change");
			})
		}
		
	</script>
</html>