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

Question

I'm writing a web app as a homework project that uses websocket to receive messages from a server and display them on html using handlebars.js.

I'm trying to implement the function of deleting a message using the following code:

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);
        }
    }

The function for adding the message to the DOM is simple:

function newMessage(i) {
            let msg = message_template({
                "message_id": i.message_id,
                "username": ...,
                "timestamp": ...,
                "content": ...
            });
            message_container.innerHTML += msg;
            addDeleteButton(i.message_id);
    }

The handlebars.js Template for the delete button is plugged into HTML as following:

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

However, every time I add a new message (including the delete button) to the DOM, all previous buttons lose their onclick() event listeners. A chrome inspector shows this clearly and it happens at line #1:
The 4th button has an event listener registered.

Adding the 5th button

The onclick event of the 4th button disappeared.

A clear workaround is to embed the onclick call into the html attribute. But why can't I register the event listeners like the given code?

Answer 1

The problem is with the following line:

message_container.innerHTML += msg;

We are using Handlebars to produce a new string of HTML which we are storing to the msg variable. We then want to append that new HTML to the #message_container DOM element.

However, message_container.innerHTML += msg does not simply append our new HTML to the #message_container , instead, it replaces all of the descendant DOM nodes of #message_container !

A breakdown of what happens is:

• We get the descendant nodes of the #message_container in the DOM, stringified into an HTML string.
• msg is concatenated onto the end of this new HTML string.
• The new HTML string replaces the innerHTML of #message_container .

The important part here is the replacement . When the innerHTML of #message_container is replaced, all of its descendant nodes are replaced . So all of the <button> s that you have previously attached onclick listeners to have been removed from the DOM.

One way to prevent replacing all the children of #message_container each time we want to add a <button> would be to use the Node.appendChild() API . The resultant code would look like:

// message_container.innerHTML += msg; // TODO: Replace this line with the below.

const node = document.createElement('div');
node.innerHTML = msg;
message_container.appendChild(node);

I have created a fiddle for reference.