JavaScript动态创建的事件处理器添加新项后消失问题

看起来你遇到的是动态创建元素的事件绑定丢失问题——当新增列表项后，之前的事件绑定逻辑没覆盖到新元素，或者直接绑定在元素上的事件在元素被移除/重建后就失效了。咱们一步步来解决：

问题根源分析 #

你当前的代码是直接给单个列表项绑定rm事件处理器，但动态创建的新元素并没有被调用setEventHandler来绑定事件；而且如果列表项被删除后再重新添加，也会因为没有重新绑定导致点击失效。另外，旧的attachEvent是IE兼容写法，现在可以简化了。

最优解决方案：事件委托（Event Delegation） #

不用给每个列表项单独绑事件，而是把事件绑定到它们的父容器上（比如有序列表<ol>或者<ul>），利用事件冒泡机制来处理点击。这样不管是初始的还是动态新增的列表项，都能触发事件，完全避免动态元素的绑定问题。

修改后的代码示例 #

<ol id="hallList">
  <!-- 初始列表项 -->
  <li id="hall1-btn">大厅1</li>
  <li id="hall2-btn">大厅2</li>
</ol>

<script>
let halls = new Set();

// 把事件绑定到父容器
document.getElementById('hallList').addEventListener('click', function(e) {
  // 确保点击的是列表项（li元素）
  if (e.target.tagName === 'LI') {
    const itemId = e.target.id;
    const hallId = itemId.substring(0, itemId.length - 4); // 提取hallId
    halls.delete(hallId);
    e.target.remove(); // 直接移除点击的元素
  }
});

// 动态添加列表项的示例函数
function addHallItem(hallId) {
  if (halls.has(hallId)) return; // 避免重复添加
  halls.add(hallId);
  
  const li = document.createElement('li');
  li.id = `${hallId}-btn`;
  li.textContent = `大厅${hallId}`;
  document.getElementById('hallList').appendChild(li);
  // 这里不用再单独绑事件！父容器的事件委托已经覆盖了
}

// 测试动态添加
// addHallItem('3');
</script>

为什么这个方案更好？ #

• 无需重复绑定事件：不管新增多少列表项，父容器的事件处理器都能捕获点击，不用每次创建元素都调用绑定函数。
• 性能更优：减少了事件绑定的数量，尤其是列表项很多的时候。
• 避免内存泄漏：不用再担心移除元素后残留的事件处理器（虽然现代浏览器会自动清理，但事件委托更干净）。

如果你坚持要保留原有绑定方式（不推荐） #

如果因为某些原因必须给每个元素单独绑事件，那在动态创建元素后必须立即调用setEventHandler，比如：

function addHallItem(hallId) {
  if (halls.has(hallId)) return;
  halls.add(hallId);
  
  const li = document.createElement('li');
  li.id = `${hallId}-btn`;
  li.textContent = `大厅${hallId}`;
  document.getElementById('hallList').appendChild(li);
  // 给新创建的元素绑定事件
  setEventHandler(li, 'click', rm);
}

同时要确保你的setEventHandler函数完整实现（你原来的代码里attachEvent部分没写完，补充完整）：

function setEventHandler(obj, name, fn) {
  if (typeof obj === "string") {
    obj = document.getElementById(obj);
  }
  if (obj.addEventListener) {
    obj.addEventListener(name, fn);
  } else if (obj.attachEvent) {
    // IE8及以下兼容，现在基本可以不用了
    obj.attachEvent(`on${name}`, fn);
  }
}

但还是强烈推荐事件委托的方案，更简洁也更健壮。

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