通过 innerHTML 添加时按钮不起作用答案

【问题标题】：Button doesn't work when added through innerHTML通过 innerHTML 添加时按钮不起作用
【发布时间】：2022-11-05 21:03:58
【问题描述】：

我有一系列在 JS 中创建的按钮来执行 onclick 功能。

如果我在页面本身上写按钮，它工作正常。

但是当它们在 JS 中创建并使用 .innerHTML 写入文档时，它们根本不起作用。

在页面加载后，以这种方式创建的按钮是否有一些问题？我需要手动添加事件监听器吗？

请注意，我不是在服务器上运行它，所以一切都必须在客户端运行。

<button class="tag" onclick="alert('Button Clicked!')">Text</button>

HTML 是相同的。我运行了该函数，然后从页面源中复制了该元素并将其直接粘贴到正文中以对其进行测试，并且在那里可以正常工作。

【问题讨论】：

您能否创建一个minimal reproducible example，以便我们自己查看问题并帮助您调试？如果您为事件侦听器使用onclick 属性，则添加该按钮时应按预期工作（如果您以不同的方式添加它，那么您可能会面临：Is it possible to append to innerHTML without destroying descendants' event listeners?）

【解决方案1】：

它应该按预期工作；看看下面的sn-p

document.body.innerHTML =`&lt;button class="tag" onclick="alert('Button Clicked!')"&gt;Text&lt;/button&gt;`

【讨论】：

【解决方案2】：

document.body.innerHTML =`&lt;button class="tag" onclick="alert('Button Clicked!')"&gt;Text&lt;/button&gt;`

【讨论】：