Question

我正在向表中动态添加一个“大厅”，如下所示：

_rooms.forEach(room => {
    const tr = document.createElement('tr')

    tr.innerHTML = `
        <th scope="row">${room.RoomName}</th>
        <td>${room.UsersInRoom.length}</td>
        <td>
            <form>
                <input class="btn btn-primary btn-sm btn-block" type="button" id="join" value="${room.RoomName}" />
            </form>
        </td>`

    document.getElementById('room-list').appendChild(tr)
})

但是我希望能够向输入类型按钮添加onclick事件。
我该如何实现？

Answer 1

获得所需结果的一种更简单的方法是通过HTML字符串创建它。创建孩子之后，您可以在foreach循环中获取事件和当前元素的道具。

这样，您不必创建每个元素并设置其道具。（请注意，以下代码适用于更新的浏览器）

_rooms.forEach(room => {
    const tr = document.createElement('tr')
    tr.innerHTML = `
        <th scope="row">${room.RoomName}</th>
        <td>${room.UsersInRoom.length}</td>
        <td>
            <form>
                <input class="btn btn-primary btn-sm btn-block" type="button" value="${room.RoomName}" />
            </form>
        </td>`

    document.getElementById('room-list').appendChild(tr)
    tr.getElementsByClassName('btn-primary')[0].addEventListener("click", () => {
        // click event code
        console.log('click', room)
    })
})

Answer 2

我使用@JasperLichte给我的建议，这是我想出的解决方案：

_rooms.forEach(room => {
    const tr = document.createElement('tr');
    const th = document.createElement('th');
    const tdAmount = document.createElement('td');
    const tdButton = document.createElement('td');
    const form = document.createElement('form');
    const input = document.createElement('input');

    th.setAttribute("scope", "row");
    th.textContent = room.RoomName;
    tdAmount.textContent = room.UsersInRoom.length;

    input.setAttribute("class", "btn btn-primary btn-sm btn-block");
    input.setAttribute("type", "button");
    input.setAttribute("id", "join");
    input.setAttribute("value", room.RoomName);
    input.addEventListener("click", function () {
        connection.invoke("JoinRoom", room.RoomName);
        $("#lobby").detach();
        $("#chat").show();
        $("#msg").focus();
        ready = true;
     });

     form.appendChild(input);
     tdButton.appendChild(form);

     tr.appendChild(th);
     tr.appendChild(tdAmount);
     tr.appendChild(tdButton);

     document.getElementById('room-list').appendChild(tr);
})

如何将onclick事件添加到动态嵌套元素？

2 个答案: