jQuery表格删除按钮首次需双击生效问题求助

我一眼就看出问题出在你的delRow()函数写法上！咱们来拆解一下：

当你第一次点击带有onClick="return delRow()"的删除按钮时，函数delRow()会执行——但这个函数并没有直接删除当前行，它只是给所有input[type="button"]元素绑定了一个点击事件。所以第一次点击其实只是完成了事件绑定，并没有触发删除操作，必须再点一次才会执行绑定好的删除逻辑。而当你删除一行之后，后续的点击其实是在触发已经绑定好的事件，所以就正常了。

另外我注意到你表格里的按钮写法不一致：一部分按钮没有加onClick属性，另一部分加了，这也可能导致行为混乱。

解决方案1：简化删除逻辑（最直接） #

把delRow()改成直接删除当前点击的行，不需要额外绑定事件：

function delRow(el) {
  $(el).closest('tr').remove();
}

然后把按钮的onClick改成传当前元素：

<input onClick="delRow(this)" tabindex="6" value="Delete Row" class="DeleteButton" type="button" />

这样点击按钮时，直接把当前按钮元素传给函数，找到最近的<tr>删除，一步到位，不会有双击问题。

解决方案2：使用事件委托（更优雅，推荐） #

事件委托能避免重复绑定事件，还能自动支持动态添加的行，不需要给每个按钮加onClick：

首先去掉所有按钮的onClick属性，然后在页面加载完成后绑定一次事件：

$(document).ready(function() {
  $('#dataTable').on('click', '.DeleteButton', function() {
    $(this).closest('tr').remove();
  });
});

这种方式是把点击事件绑定在表格（#dataTable）上，当点击到.DeleteButton时才触发删除逻辑。不管是初始生成的按钮还是后来动态添加的，都能正常工作，而且不会出现绑定延迟的问题。

为什么原来的写法会有双击问题？ #

再理一遍流程：

1. 第一次点击按钮 → 执行delRow() → 给所有按钮绑定click事件，但这次点击本身并没有触发删除
2. 第二次点击按钮 → 触发刚刚绑定的click事件 → 删除行
3. 删除一行后，后续点击都是触发已经绑定好的事件，所以正常单击生效

所以核心问题就是把事件绑定和执行删除的逻辑混在一起了，第一次点击只做了绑定，没执行删除。

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