使用outerHTML動(dòng)態(tài)添加元素后，點(diǎn)擊事件失效怎么辦？

在使用outerhtml動(dòng)態(tài)添加元素后，點(diǎn)擊事件無法觸發(fā)的問題

本文將探討一個(gè)在使用outerHTML方法動(dòng)態(tài)添加html元素后，其子元素上的點(diǎn)擊事件無法正常觸發(fā)的常見問題，并提供相應(yīng)的解決方案。

問題描述：

開發(fā)者希望通過替換模板字符串中的占位符 {companyName} 和 {days}，并將其替換成自定義標(biāo)簽 ，同時(shí)為添加一個(gè)刪除按鈕（），點(diǎn)擊刪除按鈕可以移除標(biāo)簽。 替換后的內(nèi)容會(huì)最終渲染到一個(gè) div容器中。然而，雖然頁面能夠正常顯示替換后的內(nèi)容，但添加在元素上的點(diǎn)擊事件卻無法觸發(fā)。 代碼中使用outerHTML將生成的HTML片段插入到div容器中。

代碼片段：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

replaceTemplateParams(content) {   // ... (省略部分代碼) ...   let node = document.createElement("smstag");   node.innerText = tempValue;   node.id = this.getGuid();   let deleteBtn = document.createElement("span");   deleteBtn.innerText = "x";   deleteBtn.className = "deleteBtn";   deleteBtn.addEventListener("click", () => {     node.remove();   });   node.appendChild(deleteBtn);   return node.outerHTML;   // ... (省略部分代碼) ... }

問題原因及解決方案：

問題在于，使用 outerHTML 替換內(nèi)容后， div 容器中的子元素會(huì)被重新渲染。 之前在 deleteBtn 上綁定的 click 事件會(huì)被丟失。 因此，直接在 deleteBtn 上綁定事件無效。

正確的做法是，監(jiān)聽 div 容器的點(diǎn)擊事件，然后判斷點(diǎn)擊事件的目標(biāo)元素是否為 span 元素，如果是則執(zhí)行刪除操作。

修改后的handleClick方法：

handleClick(e) {   // 判斷點(diǎn)擊的是 SPAN 節(jié)點(diǎn)(刪除圖標(biāo))   if (e.target.nodeName === "SPAN") {     // 如果是刪除按鈕，刪除標(biāo)簽     e.target.parentNode.remove();   } },

通過這種方式，我們不再直接在動(dòng)態(tài)生成的 span 元素上綁定事件，而是通過事件委托機(jī)制，在父元素 div 上監(jiān)聽事件，從而確保點(diǎn)擊事件能夠被正確捕獲和處理。

以上就是使用outerHTML動(dòng)態(tài)添加元素后，