我正在編寫一個 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 屬性中。但為什么我不能像給定的代碼那樣注冊事件偵聽器？
1 回答
富國滬深
TA貢獻1790條經驗 獲得超9個贊
問題在于以下行：
message_container.innerHTML += msg;
我們使用 Handlebars 生成一個新的 HTML 字符串，并將其存儲到msg變量中。然后我們想要將新的 HTML附加#message_container到DOM 元素。
然而，它并不是message_container.innerHTML += msg簡單地將我們的新 HTML 附加到，而是替換!的所有后代 DOM 節點。#message_container #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);
我創建了一個小提琴供參考。
- 1 回答
- 0 關注
- 209 瀏覽
添加回答
舉報
0/150
提交
取消