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

如下代码,页面初始的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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值