jQuery的delegate()方法，为由脚本创建的新元素绑定事件

最新推荐文章于 2021-09-05 01:27:24 发布

p_hao

最新推荐文章于 2021-09-05 01:27:24 发布

阅读量223

点赞数

本文链接：https://blog.csdn.net/p_hao/article/details/103333423

版权

案例

在开发中可能会遇到这样一种情况，需要给某些元素绑定事件，但这些元素在后续才会新建出来，导致绑定无效。

例如下面的案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	<div id="demo"></div>
	
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script>
		$('#btn').click(function(){
			alert('弹出成功');
		});
		
		$('#demo').html('<button id="btn">点击弹出</button>');
	</script>
</body>
</html>

因为事件写在了元素生成的前面，导致绑定无效，页面上的按钮怎么点都不会有反应。

所以一般我们都会在新增的元素后面绑定事件。

<script>
	$('#demo').html('<button id="btn">点击弹出</button>');

	$('#btn').click(function(){
		alert('弹出成功');
	});
</script>

这样是可以弹出成功了，点击按钮会有反应。
但按照我们平时各种的需求，有时候这样并不方便。

这里就可以使用jQuery的delegate()方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	<div id="demo"></div>
	
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script>
		$('#demo').delegate('#btn','click',function(){
			alert('弹出成功');
		});

		$('#demo').html('<button id="btn">点击弹出</button>');
	</script>
</body>
</html>

这时候就满足了我们的需求，在元素生成前绑定事件。

但有个注意点，就是生成的元素要是属于被选元素的子元素才能使用delegate()方法。

介绍

在这里插入图片描述
参考链接：https://www.w3school.com.cn/jquery/event_delegate.asp

p_hao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的delegate()方法，为由脚本创建的新元素绑定事件

案例在开发中可能会遇到这样一种情况，需要给某些元素绑定事件，但这些元素在后续才会新建出来，导致绑定无效。例如下面的案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head>&l...
复制链接

扫一扫