jQuery学习笔记15-事件委托

最新推荐文章于 2024-05-01 05:15:54 发布

weeds606

最新推荐文章于 2024-05-01 05:15:54 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100169493

版权

前端相关专栏收录该内容

42 篇文章 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>

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记15-事件委托

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery事件委托</title> <script src="jQuery/jquery-1.12.4.js"></script> ...
复制链接

扫一扫

专栏目录