HTML中Arrow函数无法触发的问题排查求助

核心问题分析 #

你的代码里有两个关键问题导致箭头函数绑定失效：

1. innerHTML+= 导致DOM元素重建，事件监听丢失 #

在Container.addChild方法中，你先通过innerHTML+=添加了add-button，随后又用同样方式添加remove-button。每次使用innerHTML+=都会将当前元素的内容重新序列化并解析为新的DOM元素，这意味着第一次添加的add-button会被销毁后重建，之前绑定的click事件监听会完全丢失。而删除按钮是最后添加的，没有后续的innerHTML操作覆盖它，所以能正常工作。

2. this指向混淆，错误访问类实例的不存在属性 #

在add-button的箭头函数中，this.parentNode.id里的this是Container类的实例，并非DOM元素——类实例没有parentNode属性，所以这里会直接抛出Cannot read property 'id' of undefined的错误，就算事件没丢失，执行时也会失败。

修复后的代码 #

Container.js #

import Component from './component.js';

export default class Container extends Component{
  child;
  constructor(){
    super();
  }
  addChild(id, parentId){
    // 缓存DOM元素，减少重复查询
    const parentEl = document.getElementById(parentId);
    const childEl = document.createElement('div');
    
    // 配置新创建的子元素
    childEl.id = id;
    childEl.className = this.child.className;
    childEl.innerHTML = this.child.innerHTML;
    parentEl.appendChild(childEl);

    // 添加add按钮（非check-list类容器）
    if(childEl.className !== 'check-list'){
      const addBtn = document.createElement('button');
      addBtn.id = `${id}-add-button`;
      
      // 正确传递父容器ID：当前childEl的ID，子组件会在此容器内添加元素
      addBtn.addEventListener('click', () => {
        this.child.addChild(childEl.id);
      });
      childEl.appendChild(addBtn);
    }

    // 添加remove按钮
    const removeBtn = document.createElement('button');
    removeBtn.id = `${id}-remove-button`;
    removeBtn.addEventListener('click', () => {
      childEl.remove(); // 现代DOM API更简洁的删除方式
    });
    childEl.appendChild(removeBtn);

    // 绑定input存储事件
    const inputs = childEl.getElementsByClassName('input');
    for(let i=0; i<inputs.length; ++i){ 
      inputs[i].addEventListener('input', () => {
        inputs[i].dataset.storage = inputs[i].value;
      });
    }
  }
}

关键修改说明 #

1. 用createElement+appendChild替代innerHTML+=：避免DOM元素重建，保留事件监听。
2. 缓存DOM元素：减少重复调用document.getElementById，提升性能同时避免潜在的查询错误。
3. 修正addChild的参数传递：点击add按钮时，将当前容器（childEl）的ID作为父容器ID传入，确保子组件正确挂载位置。
4. 简化元素删除逻辑：使用childEl.remove()替代繁琐的parentNode.removeChild写法。

内容的提问来源于stack exchange，提问作者wavesinaroom