为什么动态添加onclick函数不起作用？-解网

问：

我正在向页面添加一个html标签

<div id="asd" >
        <button id="gaga" onclick="onClick()"></button>
        <script type="text/javascript">
                        function onClick() {
                            console.log(":(");
                            const element = document.getElementById('asd');
                            if (element) {
                                element.remove();
                           }
                       }
                    </script>
    </div>

在我加载页面并通过 servlet 动态添加此标记后，我尝试单击该按钮，但控制台中出现错误：

enter image description here

我正在考虑通过 servlet 将此标签和脚本添加到其中，但由于某种原因，浏览器在页面上看不到此功能

编辑：我通过 websocket 将代码上传到页面（在第一页上我等待按钮出现，在第二页上我在第一页上使用 get 请求创建它）

Servlet 代码：

在此处输入图像描述

JavaScript HTML Servlet

@Barmar — 他们展示作品的 HTML/JS。如果它是由 servlet 添加的，那么它不会使用，因为那不是 servlet API。也许他们正在对 servlet 进行 Ajax 调用，然后使用 innerHTML 添加结果，但他们没有这么说。这个问题确实需要一个最小的可重复的例子。innerHTML

答：

-2赞 A_mohii_ 11/9/2023 #1

因为浏览器不知道新添加的元素。动态添加 HTML 标记时，浏览器需要重新分析 DOM（文档对象模型）以识别新元素。此过程需要一些时间，在重新解析 DOM 之前，浏览器将无法识别新添加按钮上的 onclick 属性。

若要解决此问题，可以使用事件委派将 onclick 事件处理程序附加到 DOM 中已存在的父元素。这样，浏览器就不需要在每次添加新按钮时重新解析 DOM，并且 onclick 事件处理程序仍将有效。

<div id="asd">
  <button id="gaga"></button>
  <script type="text/javascript">
    document.getElementById('asd').addEventListener('click', function(event) {
      if (event.target.id === 'gaga') {
        console.log(":(");
        const element = document.getElementById('asd');
        if (element) {
          element.remove();
        }
      }
    });
  </script>
</div>

使用此代码，onclick 事件处理程序将附加到父 div 元素，并且浏览器不需要在每次添加新按钮时重新解析 DOM。事件处理程序仍将起作用，您将能够删除新添加的按钮而不会出现任何错误。

为什么动态添加onclick函数不起作用？

why doesn't onclick function work when I add it dynamically?

评论

评论