动态绑定事件

fengnp

于 2018-11-01 18:47:27 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fengnp/article/details/83625138

<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>

on()方法替代了bind(), live() 和 delegate() 方法。on()方法可以给当前元素和未来元素绑定事件。

childSelector项是可选的，如果没有childSelector项的话，只能给被选元素（已存在的元素）绑定事件，不能给未来元素
点击添加html然后点击div弹出alert，说明方法正确执行：在这里插入图片描述