您的位置：首页 > 其它

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

2016-11-09 00:00 323 查看

摘要: 事件委托主要可以提高程序性能、新增加的元素也具有事件。

如下代码，页面初始的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('欢迎您！');
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航