<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>delegate_代表</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// $('.list li').click(function(){
// $(this).css({'backgroundColor':'plum'},)
// })
// // 常规写法, 此方法,在执行的时候, 是把当前语句下的八个li依次进行绑定.之后添加新条件的时候就不会再进行绑定.
// var $li = $('<li>9</li>');
// // 新建一个变量, 赋值给li变量.
// $('.list').append($li);
// // 把变量liappend到ul标签里面,完成增加新元素的操作.
// // 使用之前写法的话, 一方面需要绑定与元素数量相等的次数, 性能不好. 且, 之后新添加的元素不能使用该式样.
$('.list').delegate('li','click',function(){
$(this).css({'backgroundColor':'red',})
})
var $li = $('<li>9</li>');
$('.list').append($li);
// 这里新增元素也可以使用该式样.
// 一方面是性能提升, 一方面是添加新子元素也可以享受式样, 减少代码量.
// 所以, 式样操作的时候, 多使用 事件代理(委托)
})
</script>
<style type="text/css">
.list{
width: 100%;
background: tan;
list-style: none;
padding: 5px;
}
.list li{
height: 30px;
background: lime;
margin: 10px;
}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>