jQuery学习笔记15-事件委托

桃扇骨 2024-04-17 20:07 86阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery事件委托</title>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * 1.什么是事件委托
                * 就是将自己要做的事情委托给别人，别人做完之后将结果返回给我们
                * jQuery中是将子元素的事件委托给父元素
                *
                * 2.事件委托的语法
                * $("父元素标签").delegate("子元素标签","委托事件",function)
                *
                * 需求：
                * 页面上有一个列表，列表下方有一个按钮，每次点击按钮，都会新增一行列表。
                * 点击列表的任意一行，都会弹出该行的文本信息。
                * 难点：
                * 页面上所有的DOM元素加载完成之后，才会执行jQuery入口函数。
                * jQuery无法获取新增的li。
                *
                * 解决方法：
                * 将li的点击事件委托为ul，当执行jQuery时，ul已经加载完成
                * */
                //$("li")会对获取的每一行绑定点击事件。此时新增的li，无法绑定点击事件
                // $("li").click(function () {
                //     alert($(this).html())
                // });
    
                //使用事件委托，将li的click事件委托为ul，执行jQuery时，ul已经加载完成
                //此时点击新增的li，也会绑定click事件
                $("ul").delegate("li","click",function () {
                    alert($(this).html())
                });
    
                //新增按钮点击
                var count = 0;
                $("button").eq(0).click(function () {
                    count++;
                    //新增一个li
                    $("ul").append("<li>我是新增的第"+count+"个li</li>")
                })
            })
        </script>
    </head>
    <body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>
    <button>新增li</button>
    </body>
    </html>