一个demo展示
<!DOCTYPE html>
<html >
<head>
<title>Document</title>
</head>
<body>
<ul >
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<ul >
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<script type="text/javascript" src="lib/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(function(){
$('#u1 li').bind('click',function(){
console.log('bind');
});
$('#u2').on('click','li',function(){
console.log('on');
});
//此时的他们是没有区别的
//直到在我们动态的插入一段html到文档
$('#u1').append('<li>new</li>');
$('#u2').append('<li>new</li>');
//这个时候u1新插入的li没有被绑定事件
//u2新插入的li事件正常运行
});
</script>
</body>
</html>