给动态生成<li>标签绑定事件

最新推荐文章于 2022-05-26 13:15:49 发布

转载最新推荐文章于 2022-05-26 13:15:49 发布 · 473 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1271438/blog/784544

文章标签：

#javascript #ViewUI

如下代码，页面初始的li倒是可以成功加载上，那之后动态添加的dom却没有onclick事件，需要对生成的li再次定义onclick，这样就显得很麻烦，那么时间委托就可以解决这个问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--jquery v-1.11-->
		 <script src="js/jquery.min.js"></script>
		 <script>
		 	$(document).ready(function(){
		 		$('.add').click(function(){
		 			$('ul').append('<li>联合</li>');
		 		});
		 	});
		 </script>
	</head>
	<body>
		<div class="btns" id="btn">
			<ul>
				<li>北京</li>
				<li>智慧</li>
			</ul>
		</div>
		<input type="button" value="add" class="add"/>
	</body>
</html>

首先我们先用原生js来解决这个问题（兼容ie）：

				var Btns = document.getElementsByTagName("ul")[0];
				if(window.addEventListener) {
					Btns.addEventListener('click', function(e) {
						e = e || event;
						var t = e.target || e.srcElement; //chrome里面这两个对象都有
						var name = t.tagName.toLowerCase();
						if(name == 'li') {
							console.log('欢迎您！');
						}
					})
				} else {
					Btns.attachEvent('onclick', function(e) {
						e = e || event;
						var t = e.target || e.srcElement; //ie里面是没有target对象的，只有srcElement对象
						var name = t.tagName.toLowerCase();
						if(name == 'li') {
							console.log('欢迎您！');
						}
					})
				}

在chrome里有这两个对象，但是在ie里只有srcElement

输入图片说明

jquery的实现：

				//我们给动态添加的元素绑定事件的时候要jquery 1.7版本后使用on（），之前使用live（）
				//现获取所有的ul再从ul中找到li来绑定事件
                                //jquery 1.7版本以上
						 		$('.btns ul').on('click','li',function(){
						 			console.log('欢迎您！');
						 		});
                                //jquery 1.7版本以下
                                 $('.btns ul li').live('click',function(){
						 			console.log('欢迎您！');
						 		});
				//这样绑定动态添加的li是绑不上事件的
						 		$('.btns ul li').on('click',function(){
						 			console.log('欢迎您！');
						 		})

转载于:https://my.oschina.net/u/1271438/blog/784544