[jQuery]on和bind事件绑定的区别

on和bind事件绑定的区别

一个demo展示

<!DOCTYPE html>
<html lang="zh">
<head>
    
    <title>Document</title>
</head>
<body>
    <ul id="u1">
        <li>click</li>
        <li>click</li>
        <li>click</li>
    </ul>
    <ul id="u2">
        <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>
posted on 2017-01-16 21:15  代码ok  阅读(607)  评论(0编辑  收藏  举报