$(selector).bind()和$(selector).on()的区别

　　两者都是用来绑定事件处理，bind()是1.7版本之前推出的，jQuery官方推荐1.7版本之后使用on()来代替bind()。

　　使用on()绑定的元素可以使用off()解除绑定，如果需要实现绑定后只执行一次事件处理然后立即解除绑定，可以使用one()来绑定。

　　on()有一个bind()没有的功能，就是on()不仅可以作用于当前已存在的元素，还能作用于未来的元素（即后来动态创建的元素），下面的代码就可以清楚地看到on()绑定动态追加元素：

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>$(selector).on()绑定动态追加元素</title>
</head>
<body>
<button id="add">新增</button>
<ul>
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
    var index = 3;

    // 用on()绑定li的点击事件，这样后续动态追加的li会自动绑定，无需全部重新绑定或单独绑定追加的li
    $('ul').on('click', 'li', function () {
        console.log($(this).html());
    });

    // 点击新增按钮追加li，由于前面是用on()绑定li的点击事件，追加的li会自动绑定无需再做别的操作
    $('#add').click(function () {
        index++;
        $('ul').append('<li>#' + index + '</li>');
    });
});
</script>
</body>
</html>