innerHTML 删除了 onClick 函数 [重复]答案

【问题标题】：innerHTML removes the onClick function [duplicate]innerHTML 删除了 onClick 函数 [重复]
【发布时间】：2023-04-03 16:20:01
【问题描述】：

我有这段代码，其中的“innerHTML”行正在从按钮“一”和“二”中删除 onClick 函数。如果我禁用该行，则该功能适用于所有三个按钮。在这种情况下，“innerHTML”除了添加空字符串什么都不做。我需要稍后在这里添加一些东西。但是现在它只是没有工作，即使它是空字符串。

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body class="body">
    <div id="buttoncontainer"></div>
    <script>
        function test() {
            alert("click");
        }
        values = ["one", "two", "three"];
        const buttoncontainer = document.getElementById("buttoncontainer");
        for (const val of values) {
            var button = document.createElement("button");
            button.id = "button_" + val;
            button.classList.add("id_button");
            button.addEventListener("click", test);
            button.textContent = val;
            buttoncontainer.innerHTML += ""; // <--- COMMENT THIS LINE TO FIX -----
            buttoncontainer.appendChild(button);
        }
    </script>
</body>

</html>

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

当您替换按钮容器的 innerHTML 时，您将删除并重新创建其中的所有对象，这会丢失您分配的单击事件侦听器。

你有几个选择：

您可以等到完成对 buttoncontainer 的 innerHTML 的更新后，再分配 click 事件侦听器
您可以修改不包含您的按钮的不同 div 的 innerHTML
或者您可以将其他 html 元素附加到您的按钮容器，而不是使用 innerHTML 来替换整个内容。

我会说选择选项 2 或 3，但您还没有对您计划对按钮容器的 innerHTML 执行什么操作给出任何想法，因此很难知道哪种方法最有效。

【讨论】：