Jquery使用on方法绑定动态添加的元素

最新推荐文章于 2023-04-09 20:52:13 发布

原创最新推荐文章于 2023-04-09 20:52:13 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了jQuery中on()方法的使用技巧，详细解释了如何利用该方法为当前及未来的DOM元素绑定事件监听器，并通过一个具体的示例展示了正确的用法与注意事项。

on()方法

语法：$(selector).on(event,childSelector,data,function,map)

继jQuery1.7之后，on()方法替代了bind(), live() 和 delegate() 方法。on()方法可以给当前元素和未来元素绑定事件。

childSelector项是可选的，如果没有childSelector项的话，只能给被选元素（已存在的元素）绑定事件，不能给未来元素

（后续动态生成的元素）绑定事件；

效果图：

点击添加html然后点击div弹出alert，说明方法正确执行

源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<script type="text/javascript" src="js/jquery-1.10.2/jquery.min.js"></script>
	</head>

	<body>
		<button id="btn">添加html</button>
		<div style="width: 100px;height: 100px;background-color: yellow;" id="div"></div>
		<script type="text/javascript">
			$(function() {
				//正确的方式
				$("#div").on("click", ".demo", function() {
					alert("ok");
				});
				//错误的方式
				/*$("#div .demo").on("click", function() {
					alert("ok");
				});*/
				$("#btn").click(function() {
					var html = '<div class="demo" style="width: 100px;height: 100px;background-color: greenyellow;" ></div>';
					$("#div").html(html);
				});
			});
		</script>
	</body>

</html>