jQuery_事件delegate

最新推荐文章于 2024-02-05 22:26:35 发布

田江

最新推荐文章于 2024-02-05 22:26:35 发布

阅读量375

点赞数

分类专栏： jQuery 事件 JavaScript从入门到精通

本文链接：https://blog.csdn.net/jiang7701037/article/details/79143928

版权

JavaScript从入门到精通同时被 3 个专栏收录

147 篇文章 80 订阅

订阅专栏

jQuery

24 篇文章 2 订阅

订阅专栏

事件

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #box{
            position:relative;
            width:400px;
            height:300px;
            background-color: red;
        }

    </style>
</head>
<body style="height:1000px;">
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
    </ul>

    <input id="btn" type="button" value="添加一个li">
</body>
</html>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    let ord = 3;

$(function () {
    //delegate使用的是事件委托（把本该绑定在指定元素上的事件类型和事件处理函数委托给父级元素）
    //委托给哪个父级元素是可以指定的。
    //这个的意思是把本该绑定在li上的事件及事件处理函数，绑定在ul(必须是li的父级元素)上。
    $("ul").delegate("li","click",function () {
        alert(this.innerHTML);
    });
    //这个的意思是把本该绑定在li上的事件及事件处理函数，绑定在body(必须是li的父级元素)上。
    /*
    $("body").delegate("li","click",function () {
        alert(this.innerHTML);
    });
    */
    $("#btn").click(function () {
        ord++;
        $("ul").append("<li>第"+ord+"个li</li>");
    });
});

</script>