使用jquery如何给后来添加的元素也增加监听事件

问题描述:想要给id="abc"的div追加一个新的div,并且让新div具有“单击事件”的监听

原始状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-1.11.0.js"></script>

	<body>
		<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
		<button id="button">提交信息</button>
	</body>
	<script>
		$("#button").click(function() {
			$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
		});

		$('.123').on("click",function(){
			alert('OK');
		});
	</script>
</html>

这种放方式只能给当时已经存在的class="123"的元素增加监听事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-1.11.0.js"></script>

	<body>
		<div id="abc" style="width: 100px; height: 100px; background: red;"></div>
		<button id="button">提交信息</button>
	</body>
	<script>
		$("#button").click(function() {
			$("#abc").append("<div id='123' class='123' style='width: 50px; height: 50px; background: blue;'</div>");
		});
		$(document).on('click', '.123', function() {
			alert("OK");
		})
	</script>
</html>

这种可以给以后的也添加监听事件

划重点:

$(document).on('click', '.123', function() {
    alert("OK");
})
发布了20 篇原创文章 · 获赞 2 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_39056803/article/details/85778727