JQuery表格行点击触发按钮时出现无限循环问题求助

这问题我做项目时也踩过一模一样的坑！核心是事件冒泡和动态元素的事件绑定生命周期没处理好，咱们一步步拆解解决：

为什么会出现无限循环？ #

你点击表格行时触发了行内按钮的click事件，但按钮是行的子元素——按钮的点击事件会向上冒泡到父元素（行），行的click事件又会再次触发按钮点击，这样就形成了无限循环，浏览器直接卡爆。

解决无限循环：别用.one()，切断冒泡链条就行 #

.one()会让事件只能执行一次，这就是返回页面后失效的根源，咱们换个思路解决循环问题：

方案1：给按钮绑定事件时阻止冒泡 #

// 用事件委托绑定按钮（适配Ajax动态生成的元素）
$('.result_table').on('click', 'button', function(e) {
  e.stopPropagation(); // 关键：阻止按钮的点击事件冒泡到行
  // 这里写按钮原本的业务逻辑，比如提交表单
  $(this).closest('form').submit();
});

// 给行绑定点击事件，触发按钮点击
$('.result_table').on('click', 'tr', function() {
  $(this).find('button').trigger('click');
});

当行触发按钮点击后，按钮的事件执行时用stopPropagation()切断了冒泡链条，行不会再收到这个点击事件，自然就打破了循环。

方案2：在行的点击事件里过滤点击目标 #

如果不想修改按钮的原有逻辑，也可以在行的点击事件里直接跳过点击按钮的情况：

$('.result_table').on('click', 'tr', function(e) {
  // 检查点击的目标是不是按钮或按钮内部元素，是就直接返回
  if ($(e.target).closest('button').length) return;
  // 不是按钮的话，再触发按钮点击
  $(this).find('button').trigger('click');
});

这种方式相当于“跳过”了直接点击按钮时的行事件触发，同样能避免循环。

解决页面返回后无法点击的问题：坚持用事件委托 #

你用.one()时返回页面失效，本质是事件只绑定了一次，而且Ajax动态生成的元素如果直接用.on()绑定，页面缓存后新元素（或缓存元素）没有绑定事件。

用事件委托（把事件绑定到静态的父元素上，比如.result_table），不管是Ajax动态生成的行/按钮，还是浏览器返回后缓存的页面元素，只要父元素存在，事件就能正常触发——因为事件委托是监听父元素的事件冒泡，子元素不管什么时候生成都能触发。

上面的代码已经用了事件委托，只要保证.result_table是页面加载时就存在的静态元素（不是Ajax生成的），返回页面后就能正常点击。

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