使用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)添加元素后,

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊11 分享