0

Estoy cargando una tabla con registros mediante HttpRequest, el problema es que esta tabla tiene botones y los botones no funcionan porque es como sino tuvieran el evento pues se crearon luego. No me gustaria ponerle onclick a cada boton. Como puedo hacer para asignarle un evento a los botones luego de crearlos con JS?

La funcion y peticion que los crea es esta.

let searchButton = document.getElementById('searchButton');
searchButton.addEventListener('click',function(){
    let user = document.getElementById('searchInput').value;
    if(user != ""){
        const http = new XMLHttpRequest();
        const url = "/Paciente/searchInactive/"+user;
        http.onreadystatechange = function(){
            if (this.readyState==4 && this.status == 200) {
                let response = JSON.parse(this.responseText);
                document.getElementById('table-body').innerHTML = "";
                response.forEach(paciente => {
                    let addPaciente = `<tr id="tr-table">
                        <th scope="row">`+paciente.ID+`</th>
                            .
                            .
                            .
                            //Este es el boton //

                            <td><div class="size-delete"><a href="#" id="activeUser" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></td>


                        </tr>`;
                    document.getElementById('table-body').innerHTML += addPaciente;
                });
            }
        }
        http.open('GET', url);
        http.send();
    }
})

Que deberia cambiar para que los elementos nuevos que se crean tengan el evento. Les asigno el evento con un querySelectorAll, luego un foreach y añado el evento.

Este es el evento que llaman los botones

let activeUser = document.querySelectorAll('.activeUser');
activeUser.forEach((element) => {
    element.addEventListener('click', function(){
        alert('El boton funciona!');
    })
})

2 respuestas 2

0

Hay un error al colocar el mismo ID a todos los botones, una opción es añadirle el índice del ciclo. y así se aprovecha la creación del objeto más la gregación del evento.

    response.forEach(paciente, index => {
                        let addPaciente = `<tr id="tr-table">
                            <th scope="row">`+paciente.ID+`</th>
                               
    
                                <td><div class="size-delete"><a href="#" id="activeUser"+index class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></td>
    
    
                            </tr>`;
                        document.getElementById('table-body').innerHTML += addPaciente;
                    });


document.querySelector('#activeUser'+index).addEventListener('click',function(){
  alert('El boton funciona!');
})

Si va a utilizar las comillas francesas, puede usar stringTemplate para llamar los valores de las variables ${mivariable}

3
  • El problema es que la tabla al cargarse la pagina, se carga de forma normal con un foreach que me envia desde el controlador. (Estoy trabajando en Laravel). El querySelector busca las clases, no los ID. Y la ultima funcion que pusiste, estas trabajando con la variable index. Dentro del foreach entiendo que es la posicion del registro dentro del array, pero en la declaracion del evento, de donde lo obtengo? Lamento hacer muchas preguntas, no soy muy bueno en JS el 17 dic. 2021 a las 2:01
  • 1
    Se obtiene del mismo forEach que está creando el boton html, primero se crea el botón y posteriormente se añade el evento, queySelector es para cualquier etiqueta, id o clase, pero uno por uno, el querySelectorAll , recoge todos, pero el objetivo es aprovechar el forEach ya creado para no hacer un doble recorrido. No importa que sea laravel, el codigo expuesto es alfin y al cabo javascript. el 17 dic. 2021 a las 2:19
  • El código que presentaste funcionaba, pero no crei que era la mejor solucion. De todas maneras, muchas gracias por tu ayuda. el 17 dic. 2021 a las 3:37
0

Bien, pude resolverlo usando JQuery.

$("#table-body").on("click", ".deleteUser", function(){
    //Aqui pones todo tu codigo.
}

Por lo general el querySelectorAll recorre todo el codigo html al cargarse la pagina y le asigna el evento a los elemento con la clase que especificaste, pero para cuando creas el nuevo elemento o boton, el js ya se ha ejecutado y por eso tu nuevo elemento por mas que tenga la clase, no se le asigna el evento. JQuery resolvio esto referenciando el evento no al elemento al que queremos asignarle, sino a uno de sus padres.

#table-body hace referencia a un elemento padre que contendrá a al elemento al que quieras asignarle el evento. Ojo, este debe ser un elemento padre que se cree al cargar la pagina.

<tbody id="table-body">
@foreach ($pacientes as $paciente)
    <tr id="tr-table">
         .
         .
         .
        
        <td>
             <div class="size-delete" id="containerButton">
                  <a href="#" id="deleteUser" class="deleteUser"><i class="far fa-trash"></i> Eliminar</a>
             </div>
        </td>
    </tr>
@endforeach

En mi caso, el elemento padre es table-body porque siempre estará ahi aun cuando cree un nuevo registro con js (el registro que contiene al boton que quiero asignar el evento). No puedo designar por ejemplo a #containerButton porque es un elemento que aun no se crea al igual que mi boton. Debe ser si o si un elemento que ya este creado.

Luego podemos decirle on.("click",".deleteUser",function... donde .deleteUser es el elemento hijo de table-body.

Eso es todo, espero se entienda.

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.