jQuery-给ul添加了li之后，添加的li并没有绑定点击监听怎么办？

最新推荐文章于 2022-04-04 15:34:34 发布

梁同学与Android

最新推荐文章于 2022-04-04 15:34:34 发布

阅读量1k

点赞数 3

分类专栏： jQuery 文章标签： jQuery-事件委托给ul添加了li之后添加的li并没有绑定点击监听

本文链接：https://blog.csdn.net/qq_43290288/article/details/104630085

版权

jQuery 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

我们看一个简单的例子

效果图如下
这里面有一个ul里面套着4个li，还有一个独立的li
在这里插入图片描述
代码实例:
需求
1.点击li，背景就会变成红色
2.点击btn，就会添加一个li

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'practice_02.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>	
  	<ul>
  		<li>111</li>
  		<li>222</li>
  		<li>333</li>
  		<li>444</li>
  	</ul>
  	<li>222</li>
  	
  	<button id="btn">添加一个li</button>
  	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
		//1.点击li，背景就会变成红色
		$('ul>li').click(function() {
			//第一种写法
			this.style.background = 'red';
			//第二种写法          $(this).css('background','red');
		});
		
		//2.点击btn，就会添加一个li
		$('#btn').click(function() {
			$('ul').append('<li>222</li>');
		});
	</script>
  </body>
</html>

效果如下:
我们会发现，添加之后的li点击了没有变化，说明添加之后的li并没有绑定点击监听
在这里插入图片描述

解决方法一(普通方法):

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'practice_02.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	
 	</style>
  </head>
  
  <body>	
  	<ul>
  		<li>111</li>
  		<li>222</li>
  		<li>333</li>
  		<li>444</li>
  	</ul>
  	<li>222</li>
  	
  	<button id="btn">添加一个li</button>
  	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
		//1.点击li，背景就会变成红色
		$('ul>li').click(function() {
			//第一种写法
			this.style.background = 'red';
			//第二种写法          $(this).css('background','red');
		});
		
		//2.点击btn，就会添加一个li
		$('#btn').click(function() {
			$('ul')
			.append('<li>222</li>')//这里我们会发现，当我们添加了一个li之后，点击它背景颜色并不会改变
			.children('li')//找到ul的孩子li
			.click(function() {//添加点击事件
				this.style.background = 'red';
			});
		});
	</script>
  </body>
</html>

方法二(事件委托):

1.简单讲解

(1)事件委托(代理/委派)：
->将多个子元素(li)的事件监听委托给父辈元素(ul)处理
->监听回调是加在了父辈元素上
->当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul)
->父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素(li),通过这个子元素调用事件回调函数
(2)事件委托的双方

->委托方: 业主li
->被委托方: 中介ul

(3)使用事件委托的好处

->添加新的子元素，自动有事件响应处理
->减少事件监听的数量

(4)jQuery事件委托API

->设置事件委托:$(parentSelector).delegate(childrenSelector,eventName,callback)

->移出事件委托:$(parentSelector).undelegate(eventName)

2.代码实例

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'practice_02.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	
 	</style>
  </head>
  
  <body>	
  	<ul>
  		<li>111</li>
  		<li>222</li>
  		<li>333</li>
  		<li>444</li>
  	</ul>
  	<li>222</li>
  	
  	<button id="btn">添加一个li</button>
  	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
		//1.点击li，背景就会变成红色
		$('ul>li').click(function() {
			//第一种写法
			this.style.background = 'red';
			//第二种写法          $(this).css('background','red');
		});
		
		//2.点击btn，就会添加一个li
		$('#btn').click(function() {
			$('ul').append('<li>222</li>');
		});
		//事件委托
		$('ul').delegate('li','click',function() {
			this.style.background = 'red';
		});
		
		
	</script>
  </body>
</html>

3.效果
请读者复制代码自行测试
在这里插入图片描述

梁同学与Android

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery-给ul添加了li之后，添加的li并没有绑定点击监听怎么办？

我们看一个简单的例子效果图如下这里面有一个ul里面套着4个li，还有一个独立的li代码实例:需求1.点击li，背景就会变成红色2.点击btn，就会添加一个li<html> <head> <base href="<%=basePath%>"> <title>My JSP 'practice_02...
复制链接

扫一扫