jQuery中on()和click()区别

最新推荐文章于 2023-08-01 14:27:18 发布

原创最新推荐文章于 2023-08-01 14:27:18 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了jQuery中click()与on()事件处理方法的区别。click()适用于静态加载的元素，而on()则用于动态加载的场景，尤其适用于为新增元素绑定事件。文章通过实例演示了如何正确使用on()来实现动态事件绑定。

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

前言

click()属于静态加载，当页面加载完，就不在为新增加的元素添加点击事件。

on()属于动态加载，当页面加载完，可以为新增加的元素添加事件。但是必须选定负级元素。

运用

如果想使用on()动态加载事件，记得一定要选择父级元素，否则没有效果，只会作用于本事。

<html>
<head>
<script type="text/javascript" src="./jq/jquery.js"></script>

<script type="text/javascript">

$(function(){
	$("#div1").on("click",":button",function(){
		$("p").append("<button class='bt'>222</button>");
	});
});
</script>
</head>

<body>
<div id="div1">
<button class="bt">111</button>
<p></p>
</div>
</body>
</html>

以上重点是获取了div1这个父级div，选择在这之中的button按钮。这样就新增加在div1之中的button按钮，就可以动态添加事件了。