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

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

一、问题

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

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

二、原因

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

三、解决方案

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

注意：要关注一下 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) {
   	// 事件回调函数
   })
   

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

---

欢迎大家留言讨论，共同进步。

加油！