用 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 搜索 function 將記錄返回給我時，我像這樣加載它們。

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;

然后每個按鈕都應該調用這個 function。 但是如果我在搜索后用 Js 加載表格，按鈕就不起作用。 好像他們沒有 Click 事件

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

不知道是什么問題... tienen e

Answer 1

當 Javascript 代碼運行時，它會為您第一次選擇的元素綁定事件偵聽器。 下次當您使用 Javascript 使用 XHR 請求獲取信息時，在您使用信息創建新元素並將它們附加到文檔中之后，您必須重新運行執行事件偵聽器綁定的代碼部分。 因此，將您的代碼包裝在 function 中，並在您執行每個 XHR 請求后調用它。

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