解决JavaScript动态加载内容后事件监听失效的问题

<!-- 初始加载的HTML，由服务器端渲染 -->
<tbody id="table-body">
    @foreach ($pacientes as $paciente)
        <tr id="tr-table-{{ $paciente->ID }}">
            <th scope="row">{{ $paciente->ID }}</th>                
            <td>
                <div class="size-delete">
                    <a href="#" class="showUser activeUser" data-id="{{ $paciente->ID }}">
                        <i class="far fa-trash"></i> Activar
                    </a>
                </div>
            </td>
        </tr>
    @endforeach
</tbody>

let activeUser = document.querySelectorAll('.activeUser');
activeUser.forEach((element) => {
    element.addEventListener('click', function(event){
        event.preventDefault(); // 阻止a标签的默认跳转行为
        console.log("Hello from initial button!");
    });
});

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

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

/**
 * 封装事件绑定逻辑的函数
 */
function bindActiveUserEventListeners() {
    // 重新查询所有匹配的元素，包括新添加的
    let activeUserButtons = document.querySelectorAll('.activeUser');

    activeUserButtons.forEach((element) => {
        // 建议在重新绑定前移除旧的监听器，以防止重复绑定（如果元素未被完全替换而是innerHTML +=）
        // 但如果每次都是替换整个父元素的内容，则不需要此步骤。
        // 对于本例，假设是替换或添加新元素，不考虑移除旧的。

        // 为每个元素添加点击事件监听器
        element.addEventListener('click', function(event){
            event.preventDefault(); // 阻止a标签的默认行为
            console.log("Hello from re-bound button! Patient ID:", this.dataset.id);
            // 这里可以执行删除、激活等操作
            // 例如：deletePatient(this.dataset.id);
        });
    });
}

// 1. 页面初始加载完成后调用一次，绑定所有初始元素的事件
document.addEventListener('DOMContentLoaded', bindActiveUserEventListeners);

// 2. 模拟AJAX请求成功并更新DOM后的操作
function searchAndLoadPatients(query) {
    // 假设这里执行AJAX请求，获取到新的患者数据数组 newPatients
    // ...
    const newPatients = [
        { ID: 101, Name: '新患者A' },
        { ID: 102, Name: '新患者B' }
    ]; // 示例数据

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

    // 替换或添加DOM内容
    // 如果是替换整个表格内容，推荐使用 innerHTML = newHtml
    // 如果是追加，使用 innerHTML += newHtml
    tableBody.innerHTML = newHtml; 

    // 3. 在DOM更新后，再次调用函数重新绑定事件
    bindActiveUserEventListeners();
}

// 示例：点击搜索按钮后触发
// document.getElementById('searchButton').addEventListener('click', () => {
//     searchAndLoadPatients('some query');
// });

// 假设表格的tbody有ID 'table-body'
const tableBody = document.getElementById('table-body');

// 将事件监听器绑定到父元素 'table-body' 上
tableBody.addEventListener('click', function(event) {
    // 使用 event.target.closest() 来检查点击的元素或其祖先是否是我们感兴趣的 '.activeUser' 按钮
    // closest() 方法会从当前元素开始，向上查找第一个匹配选择器的祖先元素
    const targetButton = event.target.closest('.activeUser');

    // 如果找到了匹配的按钮
    if (targetButton) {
        event.preventDefault(); // 阻止a标签的默认跳转行为

        // 获取按钮的自定义数据属性，例如 data-id
        const patientId = targetButton.dataset.id; 
        console.log("Hello from delegated button! Patient ID:", patientId);

        // 可以在这里执行删除、激活等操作
        // 例如：deletePatient(patientId);
    }
});

// 动态加载内容的代码保持不变，无需在加载后再次调用绑定函数
function searchAndLoadPatientsWithDelegation(query) {
    // 假设这里执行AJAX请求，获取到新的患者数据数组 newPatients
    // ...
    const newPatients = [
        { ID: 201, Name: '新患者C' },
        { ID: 202, Name: '新患者D' }
    ]; // 示例数据

    let newHtml = '';
    newPatients.forEach(paciente => {
        newHtml += `<tr id="tr-table-${paciente.ID}">
            <th scope="row">${paciente.ID}</th>                
            <td>
                <div class="size-delete">
                    <a href="#" class="showUser activeUser" data-id="${paciente.ID}">
                        <i class="far fa-trash"></i> Activar
                    </a>
                </div>
            </td>
        </tr>`;
    });

    // 替换DOM内容，事件监听器依然有效
    document.getElementById('table-body').innerHTML = newHtml; 
    console.log("New patients loaded. Event delegation handles clicks automatically.");
}

// 示例：点击搜索按钮后触发（使用事件委托时，无需再次调用绑定函数）
// document.getElementById('searchButtonDelegation').addEventListener('click', () => {
//     searchAndLoadPatientsWithDelegation('another query');
// });