0

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>
1
  • cuando haces document.querySelectorAll() y subsecuentemente el addEventListener() es aplicado a todos los elementos que coincidan con tu selector en el documento al momento que lo cargas, los datos que llamas por ajax no existen en el documento cuando hiciste el selector, en este caso, lo mas sencillo seria volver a cargarlos cuando hagas el innerHTML Commented el 28 nov. 2022 a las 5:06

1 respuesta 1

0

Tal como te han indicado en los comentarios, el querySelectorAll() solo actua una vez durante la carga de la página, y como la petición para rellenar la tabla es un fetch() asíncrono, en ese momento aún no está rellenada la tabla y por lo tanto no encuentra nada ni puede aplicar el evento click a todos y cada uno de esos elementos.

Una de las formas de solucionarlo es mediante la delegación de eventos, donde se aplica la escucha del evento a un elemento padre, y este discrimina si el hijo que ha recibido el evento es el correcto o no para ejecutar después la función a realizar.

Por lo tanto, ponlo así:

content = document.getElementById('content')
content.addEventListener('click', function handleClick(event) {
    if (event.target.classList.contains('fa-file-pdf')) {
        console.log("El evento funciona");
  }
})

donde usamos event.target para identificar el elemento que ha recibido el click y que ha disparado esa propagación de eventos que ha llegado hasta el padre. Una vez lo recibe el padre, en este caso el elemento con id content, este evalua que hijo ha sido pulsado mediante esta instrucción:

if (event.target.classList.contains('fa-file-pdf')) {

y si coincide entonces entra en el condicional y ejecuta la acción.

Es la forma más cómoda de controlar los eventos sobre elementos que han sido creados dinámicamente y no durante la carga inicial del documento.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.