解决JavaScript动态加载DOM元素事件失效问题：原理与实践

<!-- 初始加载时，按钮事件正常 -->
<table id="patient-table">
    <tbody id="table-body">
        <!-- @foreach ($pacientes as $paciente) -->
            <tr id="tr-table-1">
                <td>Patient A</td>
                <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></div></td>
            </tr>
            <tr id="tr-table-2">
                <td>Patient B</td>
                <td><div class="size-delete"><a href="#" class="showUser activeUser"><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(){
        console.log("Hello from initial bind!");
    });
});

// 假设 paciente 是通过Ajax获取到的新数据
let paciente = { ID: 3, Name: "Patient C" }; // 模拟新数据
let newRowHtml = `<tr id="tr-table-`+paciente.ID+`">
    <th scope="row">`+paciente.ID+`</th>                
    <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></div></td>
</tr>`;

document.getElementById('table-body').innerHTML += newRowHtml; // 或者完全替换 innerHTML

/**
 * 封装事件绑定逻辑的函数
 * 每次动态加载内容后调用此函数，确保新元素也有事件监听器。
 */
function bindActiveUserEventListeners() {
    // 重新选择所有匹配 '.activeUser' 的元素，包括新添加的
    let activeUserButtons = document.querySelectorAll('.activeUser');
    activeUserButtons.forEach((element) => {
        // 为了避免重复绑定（如果旧元素还在DOM中），可以考虑先移除旧的监听器，
        // 或者更推荐使用事件委托来完全避免这个问题。
        // element.removeEventListener('click', handlerFunction); // 如果handlerFunction是命名函数
        element.addEventListener('click', function(){
            console.log("Hello from re-bind!");
            // 在这里执行删除、激活等具体业务逻辑
            // console.log("Clicked button ID:", this.id); // 如果按钮有ID
        });
    });
}

// 页面初始加载时调用一次，绑定到初始元素
bindActiveUserEventListeners();

// 假设这是一个处理Ajax请求响应的函数
function handleAjaxResponse(data) {
    let tableBody = document.getElementById('table-body');
    tableBody.innerHTML = ''; // 清空旧内容，确保每次都重新渲染
    data.forEach(paciente => {
        let newRowHtml = `<tr id="tr-table-`+paciente.ID+`">
            <th scope="row">`+paciente.ID+`</th>                
            <td><div class="size-delete"><a href="#" class="showUser activeUser"><i class="far fa-trash"></i> Activar</a></div></td>
        </tr>`;
        tableBody.innerHTML += newRowHtml; // 添加新内容
    });

    // 重要：在DOM更新后，重新调用事件绑定函数
    bindActiveUserEventListeners();
}

// 模拟Ajax请求和处理示例
// const mockPatients = [{ ID: 101, Name: "New Patient X" }, { ID: 102, Name: "New Patient Y" }];
// handleAjaxResponse(mockPatients);