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

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

问题概述:

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

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

问题出现的原因:

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

如何解决:

  1. 用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>

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

  1. 事件委托
 <body>
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        body.innerHTML += "
新元素
"
; 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。

  1. 使用jquery中的on方法
<body>
    <button id="btn">点我</button>
    <script>
        var body = document.body;
        var btn = document.getElementById('btn');
        body.innerHTML += "
新元素
"
; $('#btn').on('click', function () { alert('hello'); }) </script> </body>

你可能感兴趣的:(JS中innerHTML动态绑定的事件丢失)