After loading my table with HttpRequest the buttons don't work

Question

I have a table with patient records, each record has a delete button, when the table is loaded normally (With a foreach and the data sent from my controller) the buttons work fine, but, I have an input to search for records with HttpRequest. It does the search well, but when I load the table with JS, all the buttons of the records that I loaded stop working.

@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></td>
</tr>
@endforeach

When the JS search function returns the records to me, I load them like this.

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></td>
</tr>`;

document.getElementById('table-body').innerHTML += addPaciente;

Then each button should call this function. But if I load the table with Js after a search, the buttons don't work. It's like they don't have the Click event

let activeUser = document.querySelectorAll('.activeUser');
activeUser.forEach((element) => {
    element.addEventListener('click', function(){
        console.log("Hello");
    })
})

I do not know what is the problem... tienen e

When you replace the html you lose any event listeners that were attached to anything in that html. Even when some elements look the same they are actually new element objects and are not the ones that were returned by original `querySelectorAll()` — charlietfl, Dec 17 '21 at 00:02
You have to add the click event after you create the dom elements. e.g. `addPaciente.addEventListener` ofcourse this click will be on the tr. so `addPaciente.getElementById('#activeUser').addEventListener` — Michael Mano, Dec 17 '21 at 00:03
Do you get any error message on the console when you click the button? If yes, what does it say? — fufubrocat, Dec 17 '21 at 01:13
No, there are no error messages. I think that's what they said in the comments, since I create the buttons afterwards, the `querySelectorAll` doesn't detect them. Now I'm trying to figure out how to edit the code so that it detects them. — Aldahir Ruiz Valdez, Dec 17 '21 at 01:15
Go read up on _event delegation_. And IDs _must_ be unique in an HTML document, with the output you are creating inside your loop, you are currently violating that. And then again, when you add the new elements. — CBroe, Dec 17 '21 at 07:38

score 0 · Answer 1 · answered Dec 26 '21 at 06:22

when Javascript code is run, it binds event listeners for the elements you selected at the first time. by the next time when you are getting information using XHR requests using Javascript after you created the new elements with the info and appended them into the document You must re run the portion of your code which does the event listeners bindings. so wrap your code in a function and call it after each XHR request you do.

function activeUserEventListenerBinding() {
    let activeUser = document.querySelectorAll('.activeUser');
    activeUser.forEach((element) => {
        element.addEventListener('click', function(){
            console.log("Hello");
        }) 
    });
}
activeUserEventListenerBinding();

After loading my table with HttpRequest the buttons don't work

1 Answers1

Linked