我正在編寫(xiě)一個(gè) Web 應(yīng)用程序作為家庭作業(yè)項(xiàng)目，它使用 websocket 從服務(wù)器接收消息并使用handlebars.js 將它們顯示在 html 上。我正在嘗試使用以下代碼實(shí)現(xiàn)刪除消息的功能：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 的函數(shù)很簡(jiǎn)單：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 添加新消息（包括刪除按鈕）時(shí)，所有先前的按鈕都會(huì)丟失其 onclick() 事件偵聽(tīng)器。chrome 檢查器清楚地顯示了這一點(diǎn)，它發(fā)生在第 1 行：第四個(gè)按鈕注冊(cè)了一個(gè)事件偵聽(tīng)器。添加第五個(gè)按鈕第四個(gè)按鈕的onclick事件消失了。一個(gè)明確的解決方法是將 onclick 調(diào)用嵌入到 html 屬性中。但為什么我不能像給定的代碼那樣注冊(cè)事件偵聽(tīng)器？