如何获取动态按钮点击ID传入jQuery函数实现表单切换

核心逻辑是通过统一的类选择器绑定所有编辑按钮的点击事件，从触发事件的按钮属性中提取用户ID，再按命名规则匹配对应表单执行切换，全程不需要硬编码任何ID，支持任意数量的动态生成按钮。

第一步：调整按钮HTML代码 #

去掉冗余的内联onclick属性，给按钮加通用类名方便统一绑定事件，建议把按钮type从submit改为button避免误触发表单提交导致页面刷新：

<!-- 动态生成时保持id规则为formButton+用户ID即可 -->
<button type='button' class='btn btn-success edit-user-btn' id='formButton$uid'>Edit User #$uid</button>

第二步：替换原有jQuery逻辑 #

用事件委托的方式绑定点击事件，支持动态生成的按钮元素，自动提取当前点击按钮对应的用户ID匹配表单：

$(document).ready(function() {
  // 事件委托绑定，动态新增的按钮也能响应点击
  $(document).on('click', '.edit-user-btn', function(e) {
    // 阻止默认提交行为，即使后续改回submit类型也不会刷新页面
    e.preventDefault();
    // 从当前按钮id中截取出用户ID：去掉固定前缀formButton，剩下的就是纯uid
    const targetUid = $(this).attr('id').replace('formButton', '');
    // 匹配对应id的表单执行切换，注意表单id需要保持form+uid的命名规则
    $(`#form${targetUid}`).toggle();
  });
});

注意事项 #

• 必须保证表单id和按钮id的命名规则对应：比如用户ID为5的按钮id是formButton5，对应要切换的表单id必须是form5，如果你的表单命名规则不同，修改最后一行选择器的拼接规则即可
• 事件委托绑定到document上，不管是页面初始渲染的按钮，还是后续通过AJAX、JS动态新增的表格行按钮，都不需要重复绑定事件，直接生效
• 如果因为业务需求必须保留按钮的type="submit"，代码里的e.preventDefault()会拦截默认的表单提交行为，不会影响切换功能

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