为什么点击事件在动态添加的元素上不生效？

芹芹酱~ 提问于 2026-03-20 20:29:17 阅读 9

交互

我用 JavaScript 动态创建了一些按钮，然后想给它们绑定 click 事件，但点击完全没反应。我试过直接用 element.onclick = ... 的方式，也试过 addEventListener，都不行。

是不是因为这些元素是后来加到页面上的？那该怎么正确绑定事件呢？下面是我现在写的代码：

const btn = document.createElement('button');
btn.textContent = '点我';
document.body.appendChild(btn);

btn.addEventListener('click', () => {
  console.log('clicked!');
});

鼠标交互

我来解答赞 1 收藏

反馈

1 条解答

♫秀丽 Lv1

动态添加的元素要用事件委托。直接在父元素上加事件监听器。

document.body.addEventListener('click', (event) => {

  if (event.target.tagName === 'BUTTON') {

    console.log('clicked!');

  }

});

2026-03-20 20:46