jQuery两种按钮点击事件绑定方式的差异及点击无效问题排查

嗨，我来帮你拆解这个问题的核心原因和两种绑定方式的本质差异：

1. 最关键的问题：你违反了HTML的id唯一性规范 #

你在循环渲染表格行的时候，给每一行的按钮都设置了相同的id="edit_btn"和id="onclick_edit_btn"——但HTML里的id是页面内的唯一标识，浏览器和jQuery只会识别第一个拥有该id的元素，后面重复的id元素都会被忽略。这就是为什么第二个按钮只有第一行能触发事件的根本原因！

2. 两种绑定方式的差异解析 #

第一种：事件委托（$(document).on('click', '#edit_btn', function(){...})）

这种方式是把点击事件绑定到了document这个顶层父元素上，当你点击任何按钮时，事件会从点击的元素向上“冒泡”到document，这时jQuery会检查触发事件的元素是否匹配#edit_btn这个选择器。

虽然你用了重复的id，但因为事件委托是动态检查触发元素，所以每一个带这个id的按钮被点击时，事件都会被捕获到，所以能正确拿到对应行的id值。不过这只是“碰巧”能用，本质上还是因为你违反了id唯一的规范，不推荐这么写！

第二种：直接绑定（$("#onclick_edit_btn").click(function(){...})）

这种方式是在页面加载完成后，直接找到页面中第一个匹配#onclick_edit_btn的元素（也就是第一行的按钮），然后给它绑定点击事件。后面同id的按钮因为不符合“id唯一”的规范，根本没被jQuery找到，所以自然不会触发事件。

3. 正确的解决办法 #

第一步：把重复的id改成类名

类名是可以重复使用的，修改你的按钮代码：

<button type="button" value="{{$item->id}}" class="btn btn-primary btn-sm edit_btn">Edit</button>
<button type="button" value="{{$item->id}}" class="btn btn-primary btn-sm onclick_edit_btn">oc.Edit</button>

第二步：修改jQuery绑定代码

$(document).ready(function(){
    // 事件委托方式（强烈推荐，不管元素是初始渲染还是动态添加的都能生效）
    $(document).on('click', '.edit_btn', function(){
        var category_id = $(this).val();
        alert(category_id);
    });

    // 直接绑定方式（仅适用于页面初始就存在的元素，如果是动态添加的行，这种方式会失效）
    $(".onclick_edit_btn").click(function(){
        var category_id = $(this).val();
        alert(category_id);
    });
});

额外提醒 #

如果你的表格行是通过AJAX动态添加的（比如分页加载、新增行），那直接绑定（.click()）的方式会失效，必须用事件委托的方式——因为直接绑定只能给页面初始化时就存在的元素绑定事件，动态生成的元素不会被自动绑定。

内容来源于stack exchange