使用 outerHTML,添加的 click 事件无法触发?

作者站长头像
站长
· 阅读数 9

例如有一段文字:{companyName}使用的周转金已逾期{days},请尽快处理。

我现在把中括号部分替换成自定义标签,监听标签的 click 事件,最后把内容赋给容器(div)

页面可以正常显示,但是添加的点击事件(x)无法触发

使用 outerHTML,添加的 click 事件无法触发?

以下是部分代码

<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个回答
avatar
test
2024-07-04

直接监听div的点击事件,判断是否是span,如果是就删除节点

    handleClick(e) {
        // 判断点击的是 SPAN 节点(删除图标)
      if (e.target.nodeName === "SPAN") {
        // 如果是删除按钮,删除标签
        e.target.parentNode.remove();
      }
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容