在使用outerhtml动态添加元素后，点击事件无法触发的问题
本文将探讨一个在使用outerHTML方法动态添加html元素后，其子元素上的点击事件无法正常触发的常见问题，并提供相应的解决方案。
问题描述：
开发者希望通过替换模板字符串中的占位符 {companyName} 和 {days}，并将其替换成自定义标签
代码片段：
立即学习“前端免费学习笔记（深入）”；
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 替换内容后， div 容器中的子元素会被重新渲染。 之前在 deleteBtn 上绑定的 click 事件会被丢失。 因此，直接在 deleteBtn 上绑定事件无效。
正确的做法是，监听 div 容器的点击事件，然后判断点击事件的目标元素是否为 span 元素，如果是则执行删除操作。
修改后的handleClick方法：
handleClick(e) { // 判断点击的是 SPAN 节点(删除图标) if (e.target.nodeName === "SPAN") { // 如果是删除按钮，删除标签 e.target.parentNode.remove(); } },
通过这种方式，我们不再直接在动态生成的 span 元素上绑定事件，而是通过事件委托机制，在父元素 div 上监听事件，从而确保点击事件能够被正确捕获和处理。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
