解决JavaScript动态加载DOM元素事件失效问题：事件重新绑定与委托策略

let activeUser = document.querySelectorAll('.activeUser');
activeUser.forEach((element) => {
    element.addEventListener('click', function(){
        console.log("Hello"); // 仅对初始加载的元素有效
    });
});

// 假设 paciente 是通过AJAX获取的新数据
let addPaciente = `<tr id="tr-table">
    <th scope="row">`+paciente.ID+`</th>                
    <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></td>
</tr>`;

document.getElementById('table-body').innerHTML += addPaciente; // 添加新行

/**
 * 封装事件监听器绑定逻辑
 * 确保动态加载的元素也能响应点击事件
 */
function bindActiveUserEventListeners() {
    let activeUserButtons = document.querySelectorAll('.activeUser');
    activeUserButtons.forEach((element) => {
        // 确保不会对同一元素重复绑定监听器。
        // 浏览器通常会忽略对同一元素、同一事件类型、同一处理函数及同一捕获阶段的重复绑定。
        // 但如果处理函数是匿名函数，每次都是新的函数实例，则可能重复绑定。
        // 对于本例，如果表格内容是完全替换，则不存在重复绑定问题。
        // 如果只是追加，且元素可能重复，则需要更精细的逻辑来避免重复绑定或移除旧监听器。
        element.addEventListener('click', function(event){
            event.preventDefault(); // 阻止<a>标签的默认跳转行为
            console.log("Hello from a dynamically loaded button!");
            // 在这里执行删除操作或显示详情等逻辑
        });
    });
}

// 1. 页面首次加载时调用：确保DOM完全加载后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
    bindActiveUserEventListeners();
});

// 2. 每次AJAX请求成功，并更新DOM后调用
// 假设这是你的AJAX成功回调函数
function handleSearchResults(data) {
    let tableBody = document.getElementById('table-body');
    tableBody.innerHTML = ''; // 清空旧内容（如果需要，这会移除所有旧的事件监听器）
    data.forEach(paciente => {
        let addPaciente = `<tr id="tr-table">
            <th scope="row">`+paciente.ID+`</th>                
            <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></td>
        </tr>`;
        tableBody.innerHTML += addPaciente; // 添加新行
    });

    // 关键步骤：在DOM更新完成后，重新绑定事件监听器
    bindActiveUserEventListeners();
}

// 示例：模拟AJAX请求
// setTimeout(() => {
//     const mockData = [{ID: 101}, {ID: 102}, {ID: 103}];
//     handleSearchResults(mockData);
// }, 2000);

// 将事件监听器绑定到表格的父元素（例如，table-body）
// 确保 table-body 是一个在动态更新中不会被替换的元素
document.getElementById('table-body').addEventListener('click', function(event) {
    // 使用 closest() 方法检查点击事件的源头是否是或包含我们感兴趣的元素
    const clickedButton = event.target.closest('.activeUser');
    if (clickedButton) {
        event.preventDefault(); // 阻止<a>标签的默认行为
        console.log("Hello from a dynamically loaded button via event delegation!");
        // 在这里执行相应的逻辑，例如根据按钮的ID或数据属性进行操作
        // console.log("Clicked button ID:", clickedButton.id);
    }
});

// 当使用事件委托时，handleSearchResults 函数不再需要调用 bindActiveUserEventListeners()
function handleSearchResultsWithDelegation(data) {
    let tableBody = document.getElementById('table-body');
    tableBody.innerHTML = ''; // 清空旧内容
    data.forEach(paciente => {
        let addPaciente = `<tr id="tr-table">
            <th scope="row">`+paciente.ID+`</th>                
            <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></td>
        </tr>`;
        tableBody.innerHTML += addPaciente;
    });
    // 无需重新绑定，因为监听器已经绑定在父元素上，会自动处理新添加的子元素事件。
}

// 示例：模拟AJAX请求
// document.addEventListener('DOMContentLoaded', function() {
//     setTimeout(() => {
//         const mockData = [{ID: 201}, {ID: 202}];
//         handleSearchResultsWithDelegation(mockData);
//     }, 2000);
// });