<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.14jQuery事件委托</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//on(事件,方法):事件绑定方法
$('#btn1').on('click',function(){
var n = $('#u li').length;//列表元素个数
var list_option = '<li>A'+n+'</li>';//创建元素
$('#u').append(list_option);//追加列表项
});
//off(事件):解除绑定
$('#btn2').click(function(){
$('#btn1').off('click');
});
//练习:鼠标移入列表项，字体颜色变成红色,鼠标移出字体变成蓝色
/*新加入的列表项不具有行为
$('#u li').mouseenter(function(){
$(this).css('color','red');
}).mouseleave(function(){
$(this).css('color','blue');
});
*/
//on(事件,子元素,方法):事件的委托
$('#u').on('click','li',function(){alert($(this).html());});
//最新on()方法取代了delegate()方法
//事件绑定方法live()、delegate()、bind()、on()
//解除绑定方法die()、undelegate()、unbind()、off()
});
</script>
</head>
<body>
<input type="button" id="btn1" value="添加列表项"><br>
<input type="button" id="btn2" value="解除绑定"><br>
<ul id="u">
<li>A0</li>
<li>A1</li>
<li>A2</li>
</ul>
</body>
</html>
