使用Handlebar.js模板为多个按钮添加onclick事件监听，只有最后一个有效

Question

我正在编写一个 Web 应用程序作为家庭作业项目，它使用 websocket 从服务器接收消息并使用handlebars.js 将它们显示在 html 上。

我正在尝试使用以下代码实现删除消息的功能：

document.addEventListener('DOMContentLoaded', () => {

    ...

    let message_container = document.querySelector("#message_container");

    const message_template = Handlebars.compile(document.querySelector("#message_template").innerHTML);

    const delete_button_template = Handlebars.compile(document.querySelector("#delete_button_template").innerHTML);

    function addDeleteButton(id) {

        let con = delete_button_template({"message_id": id}); //line #1

        document.querySelector("#content_" + id).innerHTML += con;

        document.querySelector("#delete_button_" + id).onclick = function () {

            const msg_id = event.target.dataset.message_id;

            const msg = document.querySelector("#message_" + msg_id);

            const blank = document.querySelector("#message_" + msg_id + "_newline");

            msg.parentElement.removeChild(msg);

            blank.parentElement.removeChild(blank);

        }

    }

将消息添加到 DOM 的函数很简单：

function newMessage(i) {

            let msg = message_template({

                "message_id": i.message_id,

                "username": ...,

                "timestamp": ...,

                "content": ...

            });

            message_container.innerHTML += msg;

            addDeleteButton(i.message_id);

    }

删除按钮的handlebars.js 模板插入到 HTML 中，如下所示：

<button id="delete_button_{{ message_id }}" data-message_id="{{ message_id }}" class="btn btn-primary">

                Delete

</button>

但是，每次我向 DOM 添加新消息（包括删除按钮）时，所有先前的按钮都会丢失其 onclick() 事件侦听器。chrome 检查器清楚地显示了这一点，它发生在第 1 行：
第四个按钮注册了一个事件侦听器。

添加第五个按钮

第四个按钮的onclick事件消失了。

一个明确的解决方法是将 onclick 调用嵌入到 html 属性中。但为什么我不能像给定的代码那样注册事件侦听器？

Answer 1

问题在于以下行：message_container.innerHTML += msg;我们使用 Handlebars 生成一个新的 HTML 字符串，并将其存储到msg变量中。然后我们想要将新的 HTML附加#message_container到DOM 元素。然而，它并不是message_container.innerHTML += msg简单地将我们的新 HTML 附加到，而是替换!的所有后代 DOM 节点。#message_container&nbsp;#message_container发生的情况的细分是：我们获取 DOM 中的后代节点#message_container，并将其字符串化为 HTML 字符串。msg连接到这个新 HTML 字符串的末尾。新的 HTML字符串取代innerHTML了#message_container.这里重要的部分是替换。当innerHTMLof#message_container被替换时，它的所有后代节点都被替换。<button>因此，您之前附加侦听器的所有sonclick都已从 DOM 中删除。防止#message_container每次添加 a 时替换所有子级的一种方法<button>是使用Node.appendChild()API。结果代码如下所示：// message_container.innerHTML += msg; // TODO: Replace this line with the below.const node = document.createElement('div');node.innerHTML = msg;message_container.appendChild(node);我创建了一个小提琴供参考。