jquery的事件绑定方式汇总

看代码：

<!-- jquery的事件绑定方法 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text"><input type="button" value="添加">
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('input[type="button"]').click(function(){
            var con = $(this).prev().val();
            var tag = "<li>" + con + "</li>";
            $('ul').prepend(tag);
        });

        //方式一  已经存在的可以绑定，动态增加的不能绑定
        // $('li').click(function(){
        //     alert('123');
        // });

        //方式二  已经存在的可以绑定，动态增加的不能绑定
        // $('li').bind('click', function(){
        //     alert('123');
        // });
        // $('li').unbind('click', function(){
        //     alert('123');
        // });

        //方式三  已经存在的可以绑定，动态增加的不能绑定
        // $('li').on('click', function(){
        //     alert('123');
        // });

        //方式四事件委托  已经存在的可以绑定，动态增加的也可以绑定
        $('ul').delegate('li', 'click', function(){
            alert('123');
        });
        // $('ul').undelegate('li', 'click', function(){
        //     alert('123');
        // });
    </script>
</body>
</html>

　　

posted @ 2018-07-12 15:59  与君同悦  阅读(125)  评论(0)  编辑  收藏  举报