javascript - 如何向动态嵌套元素添加 onclick 事件？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 4 年前。

我正在向我的 table 动态添加一个“大厅”，如下所示:

_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 循环中获取当前元素的事件和 props。

这样您就不必创建每个元素并设置其属性。 (请记住，下面的代码适用于较新的浏览器)

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