WordPress后台自定义行按钮点击事件仅第一行生效的问题

• HTML规范明确要求id属性在整个页面中必须是唯一值，你给每一行的按钮都设置了id="pdf"，这违反了唯一性规则。
• jQuery的$("#pdf")选择器只会匹配页面中第一个带有该id的元素，因此只有第一行的按钮能触发点击事件。

1. 修改PHP代码：替换id为class并增加标识 #

把按钮的id="pdf"改成class="pdf-btn"，同时通过data属性存储文章ID，方便后续Ajax处理：

add_filter( 'page_row_actions', 'create_pdf_row_actions', 10, 2 );
function create_pdf_row_actions( $actions, WP_Post $post ) {
    if ( $post->post_type != 'item' ) {
        return $actions;
    }

    // 用class替代id，添加data-post-id存储当前文章ID
    $actions['create-pdf'] = '<a href="#" class="pdf-btn" data-post-id="' . $post->ID . '">Create PDF</a>';
    return $actions;
}

2. 修改jQuery代码：使用事件委托绑定点击事件 #

考虑到WordPress后台列表可能存在动态加载（比如翻页、筛选刷新），推荐用事件委托绑定事件，确保新加载的元素也能触发逻辑：

jQuery(document).ready(function($){
    // 事件委托：监听全局点击，仅响应.pdf-btn元素
    $(document).on('click', '.pdf-btn', function(e){
        e.preventDefault(); // 阻止默认跳转行为
        var postId = $(this).data('post-id'); // 获取当前按钮对应的文章ID
        alert('点击了Create PDF按钮，文章ID：' + postId);
        
        // 此处可添加Ajax逻辑示例：
        // $.ajax({
        //     url: ajaxurl, // WordPress内置Ajax请求地址
        //     type: 'POST',
        //     data: {
        //         action: 'custom_create_pdf', // 对应PHP端的action钩子
        //         post_id: postId
        //     },
        //     success: function(response){
        //         // 处理Ajax返回结果
        //     }
        // });
    }); 
});

如果确定列表不会动态加载，也可以直接用class选择器绑定（但事件委托兼容性更强）：

jQuery(document).ready(function($){
    $('.pdf-btn').click(function(e){
        e.preventDefault();
        var postId = $(this).data('post-id');
        alert('点击了Create PDF按钮，文章ID：' + postId);
    }); 
});

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