HTML中关于使用 innerHTML 动态建立DOM节点时，相关事件（如onclick等）失效的解决方案

最近在进行项目模块的迭代开发工做，偶尔会碰到几个值得记录的问题，这里就给你们整理分享一下，以及相应的解决方案。

1、问题

在 HTML 中咱们须要使用 js向HTML` 文档中插入内容，有两种方法，一种是 JS 建立节点，而后插入到 HTML 中；另一种是经过 ajax 异步加载的方式，从服务器获取数据，而后用 JS 把获取的数据通过处理后插入 HTML 中。

这时通常使用 innerHTML 动态建立DOM节点树，可是须要触发绑定在上面的相关事件时，会提示失效，或者提示当前方法未定义。

2、缘由

js 代码和 html 代码的顺序不可更改，当须要的内容尚未被插入到页面时，选择器只会选择页面中已经存在的元素，因此事先没有存在元素是绑定不了事件的。

3、解决方案

咱们须要把后来生成的元素绑定上事件，并注册上事件处理函数。

注意：要关注一下 this 的指向问题。

---

代码示例

let scan = document.getElementById('scan');  // 须要动态添加数据的标签容器
if(this._data.notExpire) {
	let scanHTML = `<img src="${data.base64QrCode}" alt="" class="scan-img"><p class="scan-font">请使用<span class="scan-font-wx">微信</span>扫描二维码登陆</p>`
    scan.innerHTML = scanHTML;
} else {
	let scanHTML = `<div> <div class="mask"> <div class="sx"> <p class="sx-msg">二维码已失效</p> <div class="btn-sx" id="btn-sx">刷新二维码</div> </div> </div> <img src="${data.img}" alt="" class="scan-img"> </div> <p class="scan-font">请使用<span class="scan-font-wx">微信</span>扫描二维码登陆</p> `
	scan.innerHTML = scanHTML;
   	// 上面这部分添加到html中之后，添加 onclick 事件无效，因此须要进行事件绑定/监听
	let _this = this; // 记得关注一下 this 指向
	document.getElementById("btn-sx").addEventListener("click", function() {
		// 具体执行代码
	} , false);
}
复制代码

---

给新生成的DOM节点（动态生成节点）绑定事件方法总结

1. jquery写法

   // on方法包含不少事件，点击，双击等等事件。
   $(选择器).on('click', function(){
   	// 事件回调函数
   })
   复制代码

2. js原生写法

   // 直接使用选择器进行绑定监听
   document.querySelector('选择器').addEventListener('click',function (e) {
       // 事件回调函数
   })
   
   // 能够直接取id，btn是id
   btn.addEventListener('click',function (e) {
   	// 事件回调函数
   })
   复制代码

经过上面两种绑定事件的方法，能够轻松解决今天这个问题。

---

欢迎你们留言讨论，共同进步。

加油！