Este detector de eventos no se disparará, ¿lo he construido correctamente?

Estoy tratando de agregar el detector de eventos cuando se agrega cada nueva línea después de obtenerla de la base de datos.

 const renderEmployee = (element) =>{ let newRow = ` <tr> <td>${element.lastName}</td> <td>${element.firstName}</td> <td>${element.email}</td> <td>${element.department}</td> <td>${element.location}</td> <td> <button data-empid="${element.id}" id="${element.id}Del"><i class="fa fa-trash" aria-hidden="true"></i></button> <button data-empid="${element.id}" id="${element.id}Edit"><i class="fas fa-edit"></i></button> </td> </tr> ` document.getElementById("employeeData").innerHTML += newRow; // set event listeners for delete and edit $(`#${element.id}Del`).click(() => deleteEmployee($(`#${element.id}Del`).attr("data-empid"))); $(`#${element.id}Del`).click(() => console.log("test"));

}