如何从PHP传递按钮ID至JavaScript并实现正确调用？

问题核心 #

如果你的PHP是循环生成多行数据（多个DECLINE按钮），重复的id="heys"会导致JavaScript仅能识别第一个按钮——HTML中ID必须唯一。同时若数据为动态加载，直接绑定.click()可能无法触发事件。

修正步骤 #

1. 调整PHP按钮代码
   保留data-fruit传递$id，移除重复的固定ID，利用已有的heys类作为选择器：

<td class="p-5 w-1/4 flex">
    <button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
        <a href="approve?approvid=<?php echo $id ?>">Approve</a>
    </button>
    <button type="button" data-fruit="<?php echo $id ?>" class="heys text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
        DECLINE
    </button>
</td>

（注：Approve按钮的href也调整为更规范的PHP输出写法）

2. 修改JavaScript代码
   使用事件委托绑定到父容器（比如表格的<tbody>），确保动态生成的按钮也能触发事件，同时通过类选择器匹配所有目标按钮：

// 绑定到表格tbody，也可使用document作为兜底容器
$('tbody').on('click', '.heys', function(){
    var fruitCount = $(this).data('fruit'); // .data()比.attr()更适配data属性解析
    console.log(fruitCount); // 此处即可获取PHP传递的$id值
});

补充说明 #

• 若仅存在单个按钮，原代码可正常生效；但批量生成场景下，必须保证ID唯一或采用事件委托+类选择器的方案。
• .data('fruit')会自动识别数据类型（如数字），比.attr('data-fruit')更实用。

内容的提问来源于stack exchange，提问作者Andre Dan Dayaganon