jQuery事件委托

最新推荐文章于 2024-06-30 12:46:56 发布

杪＆秋

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量1.4k

点赞数

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_51435825/article/details/128300987

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、事件委托

1、delegate()-->添加事件委托

2、undelegate()-->删除事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script>
			$(function(){
				/* 
					绑定事件监听的问题 新增的元素没有监听  设置委托事件
					子元素的事件交给父元素处理
				 */
				/* $("ul > li").click(function(){
					this.style.background="red";
				}); */
				
				
				$("#btn1").click(function(){
					$("ul").append("<li>ffff</li>")
				});
				/* 设置委托  委托方法：delegate()*/
				$("ul").delegate("li","click",function(){
					this.style.background="red";
				});
				$("#btn2").click(function(){
					$("ul").undelegate("click");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>dddd</li>
			<li>eeee</li>
		</ul>
		<button id="btn1">添加li</button>
		<button id="btn2">删除委托</button>
	</body>
</html>