WordPress插件调用admin-ajax.php的jQuery脚本仅生效一次

问题根源 #

1. 动态元素事件绑定失效：直接将点击事件绑定到Ajax加载的按钮上，DataTable执行ajax.reload刷新表格后，原按钮元素被移除，新生成的按钮未绑定事件，导致再次点击无响应。
2. setTimeout不可靠：固定3秒延迟等待DOM加载，无法精准匹配表格实际加载完成时间，可能出现事件绑定过早（按钮未生成）或过晚的情况。

解决方案：使用事件委托 #

事件委托通过将事件绑定到静态存在的父元素上，利用事件冒泡机制处理动态生成元素的事件。这种方式无需等待元素加载，且表格刷新后新生成的按钮仍能触发事件。

修改后的代码 #

// 绑定事件到静态父元素#wpbody-content，监听[data-action=duplicate]按钮的点击
$('#wpbody-content').on('click', '[data-action=duplicate]', function() {
    // 优化数据获取逻辑：先找到当前按钮所在的行，再定位目标输入框
    var $currentRow = $(this).closest('tr');
    var rate = $currentRow.next().find('.custom-control-input').val();

    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        data: {
            action: 'duplicate_row',
            duplicate_ajax: rate
        },
        success: function(data) {
            // 刷新表格，保持当前分页状态
            $('#my-table').DataTable().ajax.reload(null, false);
        }
    });
});

关键优化点 #

• 事件委托替代直接绑定：避免动态元素替换后事件丢失的问题。
• 简化DOM查找逻辑：用closest('tr')精准定位按钮所在行，替代链式parent().parent()，提升代码可读性和稳定性。
• 移除setTimeout：事件委托绑定在静态元素上，页面加载完成后立即生效，无需依赖固定延迟。

可选：监听DataTable绘制事件 #

如果需要在表格每次绘制完成后执行额外操作，可监听DataTable的draw.dt事件：

$('#my-table').on('draw.dt', function() {
    // 表格绘制完成后的自定义操作（如样式调整等）
});

内容的提问来源于stack exchange，提问作者uomopalese