html innerhtml 绑定事件无效,js中innerHTML的动态绑定的事件丢失

js事innerHTML事件丢失

老前端人以前很容易遇到这种问题。渲染服务器端的数据，包装成自己的HTML，使用innerHTML或者.html()，异步的把它渲染上去。这时候会发现子元素写的一些事件不生效。

image

案发现场

例如我们想在body中追加一个div,仔细看下面这个代码，您就会发现我在说什么了。

按钮

var ob = document.getElementById('btn');

//document.body.innerHTML +="

ob.onclick = function(){

console.info(1)

}

很简单的几行代码，注释那段代码加了和不加区别很大，加了后发现事件是没有被触发的，相信老鸟们当然懂这是为什么了。其实是innerHTML，因为只是操作了文本，操作的元素是body，所以导致了重写了button，相当于是创建了另外一个dom对象，与之前渲染的dom没有关系，所以导致了事件的丢失。

如何解决

那我们既然知道其病因，我们就来解决此类问题。其实本质就是dom丢失导致事件丢失，我们刚才说了我们操作的是body对象，所以我们就在父类元素上做文章就可以了。因为父元素(我们操作的元素)是一直存在的。我这里提出常用的方案：

用appendchildren()来代替innerHTML

var ob = document.getElementById('btn');

var div = document.createElement('div');

document.body.appendChild(div);

//document.body.innerHTML +="

ob.onclick = function(){

console.info(1)

}

可以看到我们只是新建了一个需要的div然后把它append到了body中，并没有改变其他任何东西。所以当然不存在dom事件丢失。

事件委托

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'){

console.info('我被点击了')

}

}

我们这里将事件绑定给了body。通过body委托事件给button，这里用到了nodeName，来给按钮绑定事件。当然这里判断的条件随意添加.

如果是jq的话那就更方便了，直接用on绑定事件就可以。例如：

$(body).on('click','button',function(){

...

})

结语

框架太多，好久没写原生了。勿忘初心啊，写起来写的都不是很顺手了，如有不正确之处欢迎指正。此问题送给遇到这个的大兄弟，小姐姐。好了，睡前一根烟，晚安。