javascript - 使用 outerHTML，添加的 click 事件无法触发?

Question

例如有一段文字：{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>

Answer 1

同意上面说的事件委托。

---

目前只根据你提供的内容来看，没有调用 replaceTemplateParams。你都没有调用的代码怎么会生效呢？

---

最后再说 return node.outerHTML 你这里应该直接返回 node，因为你返回了 text 所以你用到的 addEventListener 其实都无效了。

Answer 2

用事件委托绑定事件试试

Answer 3

搜索关键字：事件委托或事件代理

Answer 4

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

    handleClick(e) {
        // 判断点击的是 SPAN 节点(删除图标)
      if (e.target.nodeName === "SPAN") {
        // 如果是删除按钮，删除标签
        e.target.parentNode.remove();
      }
    },