jQuery 事件委托 | 易学教程

自从学习了jQuery，发现很多事件没办法记住，往往学着后面的忘着前面的，很苦恼，所以捡出一些容易忘记的方法单独记录在这里，以供日后复习用到。

我们在绑定事件时（比如点击事件），只能绑定在HTML页面已有的元素上（比如下方html里的

上），当使用jQuery创建新的div元素时，新的元素便没有这个事件，如果我想还有，那怎么办，这里就得用到事件委托。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件委托</title>
    <script src="../../../File/jquery-3.3.1.js"></script>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid #fff;
            background:red;
            margin:5px;
            float:left;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="button" value="点击增加div" id="btn">
    </form>
    //原有的div元素
    <div id="div1"></div>
    <script>
    //点击创建新的div元素
        $('#btn').click(function(){
            $('<div></div>').appendTo($('body'));
        })
    //为元素附上点击事件，当点击元素时，背景颜色改变
        $('div').click(function(){
            $(this).css('background','green');
        })
    </script>
</body>
</html>

可以看到，第一个div点击可以变颜色，但是后面的创建出来的点击没有改变颜色

当我们将代码更改成下面，无论我们创建多少个新div元素，点击背景色改变都有效

<script>
        $('#btn').click(function(){
            $('<div></div>').appendTo($('body'));
        })

        $(document).on('click','div',function(){
            $(this).css('background','green');
        })
    </script>

这里可以看到新创建出的元素点击依然有效

来源：CSDN

作者：翌日阳

链接：https://blog.csdn.net/weixin_43043455/article/details/82712227

标签

jquery

jquery事件

html代码