jQuery实现：如何区分多个相同按钮并传递参数？

首先要纠正一个问题：你之前给所有循环生成的按钮用了同一个id="mybutton"，这是错误的——HTML中id必须唯一，重复id会导致选择器只能选中第一个元素，无法区分不同按钮。

下面是正确的实现方式：

1. 修改HTML（Thymeleaf模板） #

用class统一标识按钮，同时通过自定义数据属性（data-*）存储${l}的值：

<table>
    <tr th:each="l : ${lst}">
        <td>
            <input type="button" class="my-button" th:data-item="${l}" />
        </td>
    </tr>
</table>

这里th:data-item="${l}"会被Thymeleaf渲染为data-item="对应的值"，把每个按钮关联的l数据存在元素属性里。

2. jQuery事件绑定 #

静态元素绑定（表格不会动态新增行） #

// 页面加载完成后绑定事件
$(function() {
    $('.my-button').click(function() {
        // 获取当前点击按钮对应的${l}值
        const item = $(this).data('item');
        // 执行原来foo函数的逻辑，或者直接调用foo
        foo(item);
    });
});

// 保留原有的foo函数
function foo(x) {
    // 你的业务逻辑
    console.log('当前点击的项：', x);
}

动态元素绑定（表格会通过AJAX等方式新增行） #

如果后续会动态添加表格行，用事件委托更可靠，把事件绑定到父元素（比如table）上：

$(function() {
    $('table').on('click', '.my-button', function() {
        const item = $(this).data('item');
        foo(item);
    });
});

非常合理，甚至比原来的内联onclick更优：

• 代码解耦：HTML结构和JS逻辑分离，代码更整洁，维护更方便；
• 性能更优：批量绑定事件比给每个按钮生成独立的内联函数更高效；
• 兼容动态元素：事件委托能自动处理后续新增的按钮，内联事件做不到；
• 符合前端最佳实践：遵循“分离关注点”的原则，减少HTML与JS的耦合。

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