我们看一个简单的例子
效果图如下 这里面有一个ul里面套着4个li，还有一个独立的li 
代码实例: 需求 1.点击li，背景就会变成红色 2.点击btn，就会添加一个li
My JSP 'practice_02.jsp' starting page
111
222
333
444
222
添加一个li
//1.点击li，背景就会变成红色
$('ul>li').click(function() {
//第一种写法
this.style.background = 'red';
//第二种写法 $(this).css('background','red');
});
//2.点击btn，就会添加一个li
$('#btn').click(function() {
$('ul').append('222 ');
});
效果如下: 我们会发现，添加之后的li点击了没有变化，说明添加之后的li并没有绑定点击监听 
解决方法一(普通方法):
My JSP 'practice_02.jsp' starting page
111
222
333
444
222
添加一个li
//1.点击li，背景就会变成红色
$('ul>li').click(function() {
//第一种写法
this.style.background = 'red';
//第二种写法 $(this).css('background','red');
});
//2.点击btn，就会添加一个li
$('#btn').click(function() {
$('ul')
.append('222 ')//这里我们会发现，当我们添加了一个li之后，点击它背景颜色并不会改变
.children('li')//找到ul的孩子li
.click(function() {//添加点击事件
this.style.background = 'red';
});
});
方法二(事件委托):
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.代码实例
My JSP 'practice_02.jsp' starting page
111
222
333
444
222
添加一个li
//1.点击li，背景就会变成红色
$('ul>li').click(function() {
//第一种写法
this.style.background = 'red';
//第二种写法 $(this).css('background','red');
});
//2.点击btn，就会添加一个li
$('#btn').click(function() {
$('ul').append('222 ');
});
//事件委托
$('ul').delegate('li','click',function() {
this.style.background = 'red';
});
3.效果 请读者复制代码自行测试 
