动态生成获取节点

最新推荐文章于 2023-11-09 11:24:12 发布

AIROU_ao

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/AIROU_ao/article/details/126678474

版权

解决jQuery获取不到动态生成的元素节点的问题

问题：

当我点击切换颜色按钮，发现获取不到这个按钮的节点

问题起因：

因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到

解决办法：

使用事件委托

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul.list {
            width: 600px;
            border: 1px solid #000;
        }

        ul li {
            list-style: none;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: aquamarine;
        }

        div.current {
            background-color: pink;
        }
    </style>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="add">添加盒子</button>
    <ul class="list">

    </ul>
    <script>
        $(function () {
            $('#add').click(function () {
                var newLi = document.createElement('li')
                newLi.innerHTML = `
                	<h2>hello！</h2>
                	<div class="box">

                	</div>
                	<button class="change">切换盒子背景颜色</button>
           		 `
                $('ul.list').append(newLi)
                // 直接获取发现获取不到
                // $('#change').click(function () {
                //     $('div.box').toggleClass('current')
                // })
                // 事件委托
                $('ul.list').on('click','button.change',function(){
                    $('div.box').toggleClass('current')
                })
            })
        })
    </script>
</body>

</html>