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

<!-- 初始加载时，由服务器端模板渲染 -->
<table id="patient-table">
    <tbody id="table-body">
        @foreach ($pacientes as $paciente)
            <tr id="tr-patient-{{ $paciente->ID }}">
                <td>{{ $paciente->Name }}</td>
                <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>
</table>

let activeUserButtons = document.querySelectorAll('.activeUser');
activeUserButtons.forEach((element) => {
    element.addEventListener('click', function(event){
        event.preventDefault(); // 阻止a标签的默认跳转行为
        console.log("Hello from initial button!");
        // 执行删除逻辑，例如获取 data-id
        let patientId = this.dataset.id;
        console.log("Activating user with ID:", patientId);
    });
});

// 假设 paciente 是从Ajax请求返回的数据
function addPatientRow(paciente) {
    let rowHtml = `<tr id="tr-patient-${paciente.ID}">
        <td>${paciente.Name}</td>
        <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 += rowHtml;
}

// 模拟Ajax请求成功后更新表格
// fetch('/api/searchPatients?query=test')
//     .then(response => response.json())
//     .then(data => {
//         let tableBody = document.getElementById('table-body');
//         tableBody.innerHTML = ''; // 清空现有内容
//         data.forEach(paciente => addPatientRow(paciente));
//     });

/**
 * 绑定或重新绑定 .activeUser 按钮的点击事件监听器
 */
function bindActiveUserEventListeners() {
    // 移除所有旧的监听器以避免重复绑定（如果不是完全替换内容的话，否则不需要）
    // 或者确保每次调用时只绑定一次，例如通过在绑定前先移除
    // 但更简单的方式是确保在每次内容完全替换后调用此函数

    let activeUserButtons = document.querySelectorAll('.activeUser');
    activeUserButtons.forEach((element) => {
        // 为了防止重复绑定，可以在绑定前检查是否已绑定，或使用事件委托
        // 对于完全替换内容的场景，简单重新绑定是可行的。
        // 这里为了演示，我们假设每次调用都是针对新的或替换后的元素。
        element.addEventListener('click', function(event){
            event.preventDefault();
            console.log("Hello from dynamically loaded button!");
            let patientId = this.dataset.id;
            console.log("Activating user with ID:", patientId);
            // 实际的业务逻辑，例如发送Ajax请求删除记录
        });
    });
}

// 1. 页面首次加载时调用，为初始内容绑定事件
document.addEventListener('DOMContentLoaded', bindActiveUserEventListeners);

// 2. 模拟通过HttpRequest获取并更新表格内容的函数
function updateTableContent(data) {
    let tableBody = document.getElementById('table-body');
    tableBody.innerHTML = ''; // 清空现有内容

    data.forEach(paciente => {
        let row = `<tr id="tr-patient-${paciente.ID}">
            <td>${paciente.Name}</td>
            <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>`;
        tableBody.innerHTML += row;
    });

    // 3. 关键一步：在内容更新后重新绑定事件
    bindActiveUserEventListeners();
}

// 示例：模拟Ajax请求成功后更新表格
// 假设从后端获取的数据格式为 [{ID: 1, Name: 'John Doe'}, {ID: 2, Name: 'Jane Smith'}]
// const mockData = [
//     { ID: 101, Name: 'Alice' },
//     { ID: 102, Name: 'Bob' },
//     { ID: 103, Name: 'Charlie' }
// ];
// updateTableContent(mockData);

// 1. 将事件监听器绑定到表格的 tbody 元素（静态父元素）
document.getElementById('table-body').addEventListener('click', function(event) {
    // 检查点击事件是否来源于具有 'activeUser' 类的元素或其内部
    // event.target.closest('.activeUser') 会从 event.target 向上查找最近的匹配选择器的祖先元素
    const clickedButton = event.target.closest('.activeUser');

    if (clickedButton) {
        event.preventDefault(); // 阻止a标签的默认跳转行为
        console.log("Hello from delegated event listener!");
        let patientId = clickedButton.dataset.id;
        console.log("Activating user with ID:", patientId);
        // 实际的业务逻辑
    }
});

// 2. 当使用事件委托时，更新表格内容后无需重新绑定事件
function updateTableContentWithDelegation(data) {
    let tableBody = document.getElementById('table-body');
    tableBody.innerHTML = ''; // 清空现有内容

    data.forEach(paciente => {
        let row = `<tr id="tr-patient-${paciente.ID}">
            <td>${paciente.Name}</td>
            <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>`;
        tableBody.innerHTML += row;
    });
    // 注意：这里不需要再次调用 bindActiveUserEventListeners() 或其他绑定函数
}

// 示例：模拟Ajax请求成功后更新表格
// const mockDataDelegation = [
//     { ID: 201, Name: 'David' },
//     { ID: 202, Name: 'Eve' }
// ];
// updateTableContentWithDelegation(mockDataDelegation);