使用 HttpRequest 加载我的表后，按钮不起作用

Question

我有一个包含患者记录的表，每个记录都有一个删除按钮，当表正常加载时(使用foreach和从我的控制器发送的数据(，按钮工作正常，但是，我有用HttpRequest搜索记录的输入。它可以很好地进行搜索，但当我用JS加载表时，我加载的记录的所有按钮都会停止工作。

@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

当JS搜索函数将记录返回给我时，我会像这样加载它们。

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;

然后每个按钮都应该调用这个函数。但是，如果我在搜索后用Js加载表，按钮就不起作用了。就好像他们没有点击事件

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

我不知道问题出在哪里。。。

Answer 1

运行Javascript代码时，它会为您第一次选择的元素绑定事件侦听器。下次使用Javascript使用XHR请求获取信息时在使用信息创建新元素并将其附加到文档中之后，必须重新运行代码中执行事件侦听器绑定的部分。因此，将代码封装在一个函数中，并在每次请求XHR后调用它。

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