在使用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)簽
代碼片段:
立即學(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)擊事件能夠被正確捕獲和處理。