Tengo una tabla que al cargar la página automáticamente se rellena con datos de una base de datos, usando AJAX. El problema es que dentro de las celdas de la tabla tenía eventos declarados, que ahora no funcionan.
Este es un uno de los eventos (aplicada a una etiqueta "i"):
<div id="datatable">
<table>
<tr>
<th>Nro.</th>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tbody id="content">
</tbody>
</table>
<script>
getData();
function getData() {
let input = document.getElementById("buscar").value;
let content = document.getElementById("content");
let url = "actions/datatable.php";
let formaData = new FormData();
formaData.append("buscar", input);
fetch(url, {
method: "POST",
body: formaData
}).then(response => response.json())
.then(data => {
content.innerHTML = data
}).catch(err => console.log(err))
}
document.querySelectorAll(".fa-file-pdf").forEach(box => {
box.addEventListener('click', function handleClick(event) {
console.log("El evento funciona");
});
</script>