使用 outerHTML,添加的 click 事件无法触发?
例如有一段文字:{companyName}使用的周转金已逾期{days},请尽快处理。
我现在把中括号部分替换成自定义标签,监听标签的 click 事件,最后把内容赋给容器(div)
页面可以正常显示,但是添加的点击事件(x)无法触发
以下是部分代码
<template>
<div
class="template_input"
ref="templateInputRef"
:id="contentId"
@click="handleClick"
@focus="isLocked = true"
@blur="isLocked = false"
@keydown.delete="handleClickDelete"
@input="handleInput"
></div>
</template>
<script>
export default {
data(){
return {
defaultContentInfo: [{key: 'companyName', value: '公司名称'}, {key: 'days', value: '天数'}]
}
},
methods: {
// 替换默认短信模板内的参数
// content: {companyName}使用的周转金已逾期{days},请尽快处理
replaceTemplateParams(content) {
if (content) {
const regx = /\{(.*?)\}/g;
return content.replace(regx, (match) => {
let matchStr = match.replace(/\{|\}/g, "");
let tempValue = this.defaultContentInfo.find(
(item) => item.key == matchStr
).value;
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;
});
} else {
return "";
}
}
}
}
</script>
<style>
.template_input {
width: 100%;
min-height: 100px;
box-sizing: border-box;
font-size: 14px;
padding: 10px;
line-height: 1.5;
word-break: break-word;
resize: vertical;
overflow: auto;
// 允许编辑,禁止富文本
-webkit-user-modify: read-write-plaintext-only !important;
}
</style>
回复
1个回答

test
2024-07-04
直接监听div
的点击事件,判断是否是span
,如果是就删除节点
handleClick(e) {
// 判断点击的是 SPAN 节点(删除图标)
if (e.target.nodeName === "SPAN") {
// 如果是删除按钮,删除标签
e.target.parentNode.remove();
}
},
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容