Después de cargar mi tabla con HttpRequest, los botones no funcionan.
Tengo una tabla con registros de pacientes, cada registro tiene un botón de eliminar. Cuando la tabla se carga normalmente (con un bucle foreach y los datos enviados desde mi controlador), los botones funcionan correctamente. Sin embargo, tengo un campo de búsqueda para buscar registros con HttpRequest. La búsqueda funciona bien, pero cuando cargo la tabla con JS, todos los botones de los registros que cargué dejan de funcionar.
@foreach ($pacientes as $paciente)
<tr id="tr-table">
.
.
.
<td><div class="size-delete"><a href="#" id="activeUser" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></div></td>
</tr>
@endforeach
Cuando la función de búsqueda en JS me devuelve los registros, los cargo de la siguiente manera.
let addPaciente = `<tr id="tr-table">
<th scope="row">${paciente.ID}</th>
<td><div class="size-delete"><a href="#" id="activeUser" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></div></td>
</tr>`;
document.getElementById('table-body').innerHTML += addPaciente;
Luego, cada botón debería llamar a esta función. Pero si cargo la tabla con JS después de una búsqueda, los botones no funcionan. Es como si no tuvieran el evento de clic.
let activeUser = document.querySelectorAll('.activeUser');
activeUser.forEach((element) => {
element.addEventListener('click', function(){
console.log("Hola");
})
})
No sé cuál es el problema…
davy.ai
El problema aquí es que cuando la tabla se carga normalmente (desde el controlador), los botones se les asigna el listener de eventos. Sin embargo, cuando la tabla se carga con JavaScript después de una búsqueda, los botones no tienen asignado el listener de eventos porque el código JavaScript que asigna el listener de eventos no se ejecuta de nuevo.
Para solucionar esto, puedes asignar el listener de eventos a los botones después de cada actualización de la tabla. Puedes modificar tu código de esta manera:
De esta manera, el listener de eventos se asignará a cada botón cada vez que se agregue una nueva fila a la tabla, ya sea a través del controlador o a través de JavaScript después de una búsqueda.