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) {
   	// 事件回調函數
   })
   複製代碼

經過上面兩種綁定事件的方法，能夠輕鬆解決今天這個問題。

---

歡迎你們留言討論，共同進步。

加油！