处理AJAX动态加载元素事件的策略：jQuery事件委托详解

$(staticParentSelector).on(eventName, dynamicChildSelector, function(event) {
    // 事件处理逻辑
    // this 关键字将指向触发事件的动态子元素
    // event.target 也是指向触发事件的动态子元素
});

<select id="dataSelector">
    <option value="1">数据组 1</option>
    <option value="2">数据组 2</option>
</select>

<div id="tableContainer">
    <!-- 初始表格或动态加载的表格将在此处 -->
    <table class="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>101</td>
                <td>项目A</td>
                <td><button class="action-btn edit-btn" data-id="101">编辑</button></td>
            </tr>
        </tbody>
    </table>
</div>

$(document).ready(function() {
    // 假设这是用于模拟AJAX更新表格的函数
    function loadNewTableData(groupId) {
        // 模拟AJAX请求
        console.log("加载数据组:", groupId);
        const newData = `
            <tbody>
                <tr>
                    <td>${groupId}01</td>
                    <td>新项目${groupId}A</td>
                    <td><button class="action-btn edit-btn" data-id="${groupId}01">编辑</button></td>
                </tr>
                <tr>
                    <td>${groupId}02</td>
                    <td>新项目${groupId}B</td>
                    <td><button class="action-btn edit-btn" data-id="${groupId}02">编辑</button></td>
                </tr>
            </tbody>
        `;
        // 清空并加载新数据
        $('#tableContainer .data-table tbody').html(newData);
        console.log("表格数据已更新。");
    }

    // 为选择器绑定change事件，用于触发数据加载
    $('#dataSelector').on('change', function() {
        const selectedGroup = $(this).val();
        loadNewTableData(selectedGroup);
    });

    // 使用事件委托处理动态生成的编辑按钮的点击事件
    // 将事件绑定到 #tableContainer (一个静态父元素)
    $('#tableContainer').on('click', '.action-btn.edit-btn', function() {
        const itemId = $(this).data('id');
        alert('编辑项目ID: ' + itemId);
        console.log('点击了编辑按钮，ID:', itemId);
    });

    // 如果选择 `document` 作为静态父元素，也是可以的，但通常建议选择最近的静态父元素
    // $(document).on('click', '.action-btn.edit-btn', function() {
    //     const itemId = $(this).data('id');
    //     alert('编辑项目ID: ' + itemId);
    //     console.log('点击了编辑按钮，ID:', itemId);
    // });

    // 初始加载数据（可选）
    loadNewTableData($('#dataSelector').val());
});

document.addEventListener("click", function (event) {
    // 检查被点击的元素是否包含特定的类
    if (event.target.classList.contains("button")) {
        // 你的事件处理代码
        console.log("Button clicked:", event.target.textContent);
        // 如果需要获取data属性，可以使用 event.target.dataset.id 等
    }
});