How do I add a onclick event to a dynamic nested element?

Question

I am dynamically adding a "lobby" to my table like so:

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

But I want to be able to add an onclick event to the input type button.
How can I achieve that?

Instead of inserting a plane HTML string into the DOM you should create actual DOM elements with `document.createElement` first and add eventListeners to those elements — Jasper Lichte, Feb 15 '19 at 09:49

score 2 · Accepted Answer · edited Feb 15 '19 at 13:39

An easier way to get the result you want is to create it via the HTML string. And after creating the child you can get the events and the props of the current element in the foreach loop.

This way you don't have to create each element and set its props. (keep in mind that the code below is for newer browsers)

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

score 1 · Answer 2 · answered Feb 15 '19 at 10:40

I used the advice @JasperLichte gave me, and this is the solution that I came up with:

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

Nice one! Though when you're already using jQuery you might aswell use its' functions to create DOM elements. Might save you a few lines of code and make it more readable — Jasper Lichte, Feb 15 '19 at 13:19
@JasperLichte yeah, i used the answer that Thom gave to fix my problem, is even shorter :) — BlueDragon709, Feb 15 '19 at 14:24

How do I add a onclick event to a dynamic nested element?

2 Answers2