JS中innerHTML动态绑定的事件丢失

最新推荐文章于 2024-05-10 10:18:38 发布

ohmorning

最新推荐文章于 2024-05-10 10:18:38 发布

阅读量3.4k

点赞数 3

本文链接：https://blog.csdn.net/qq_41818857/article/details/103752612

版权

JS中innerHTML动态绑定的事件丢失

问题概述：

父元素使用innerHTML在原有的内容下插入新的内容，会导致原来的子元素绑定的事件无效，具体代码如下：

<body>
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        body.innerHTML += "<div class='newDiv'>新元素</div>";
        btn.onclick = function () {
            alert('hello');
        }
    </script>
</body>

问题出现的原因：

问题就出在innerHTML上，因为重写了body里面button，这就相当于创建了另外一个dom对象，之前渲染的dom跟这个新的dom对象没有关系，所以就导致了事件的丢失。

如何解决：

用appendchild()来代替innerHTML

<button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        var newDiv = document.createElement('div');
        var newDivTxt = document.createTextNode('新元素');
        newDiv.appendChild(newDivTxt);
        body.appendChild(newDiv);
        btn.onclick = function () {
            alert('hello');
        }
    </script>

这样只是添加新的内容而没有重写，自然就不会出现上面的问题了。

事件委托

 <body>
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        body.innerHTML += "<div class='newDiv'>新元素</div>";
        body.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if (target.nodeName.toLowerCase() == 'button') {
                alert('我又可以点击啦!')
            }
        }
    </script>
</body>

给body事件绑定。通过body委托事件给button。

使用jquery中的on方法

<body>
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        body.innerHTML += "<div class='newDiv'>新元素</div>";
        $('#btn').on('click', function () {
            alert('hello');
        })
    </script>
</body>