表格行与内部删除按钮点击事件冲突及Bootstrap Modal问题求助

问题背景 #

• 需求：点击表格行时跳转到预设链接；点击行内的删除按钮时，打开Bootstrap模态框（Modal）
• 遇到的问题：点击删除按钮时，表格行的跳转事件也会被触发，导致既弹出模态框又触发了页面跳转
• 尝试情况：参考了两篇Stack Overflow方案后，要么模态框失效，要么获取目标对象时始终返回Null

问题原因 #

这事儿的核心是**事件冒泡（Event Bubbling）**在搞鬼！DOM里的事件会从触发的子元素往上“冒泡”到父元素层级。当你点击删除按钮时，按钮的点击事件先触发，接着这个事件会顺着DOM树往上跑，触发它的父元素<tr>的点击事件，所以两个事件都执行了，就出现了冲突。

解决方法 #

我给你两种靠谱的解决方式，按需选择：

方法1：直接在删除按钮的事件里阻止冒泡 #

这种方式适合不想大改现有代码的情况，只需要给删除按钮的事件加上阻止冒泡的逻辑：

修改后的JavaScript代码：

function show_clothing(t_row) { 
  var link = $(t_row).attr('data-href'); 
  console.log("Redirect to : " + link); 
  // 这里可以加上实际跳转代码，比如 window.location.href = link;
} 

function delete_clothing(btn, event) { 
  // 关键：阻止事件冒泡，不让它触发父元素<tr>的点击事件
  event.stopPropagation();
  var clothing_id = $(btn).attr('data-clothing_id'); 
  console.log("Delete : " + clothing_id); 
  // 顺便把服装ID绑定到模态框的删除按钮上，方便后续操作
  $('#delete_btn').attr('href', '/delete_person/' + clothing_id);
}

对应的HTML按钮部分也要传event参数：

<button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34" onclick="delete_clothing(this, event)">Delete</button>

方法2：移除内联事件，用jQuery绑定（更优雅易维护） #

内联事件混在HTML里不利于后期维护，推荐用jQuery统一绑定事件，这样处理冒泡更灵活：

首先修改HTML，移除<tr>和<button>的onclick属性：

<tr data-href="a_link">
  <td>#34</td>
  <td>
    <button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34">Delete</button>
  </td>
</tr>

然后写jQuery事件绑定代码：

$(document).ready(function() {
  // 绑定表格行的点击事件
  $('tbody tr').on('click', function() {
    var link = $(this).attr('data-href');
    console.log("Redirect to : " + link);
    // window.location.href = link; // 实际跳转时打开这行
  });

  // 绑定删除按钮的点击事件，同时阻止冒泡
  $('tbody .btn-danger').on('click', function(event) {
    // 阻止事件向上冒泡到<tr>，避免触发行跳转
    event.stopPropagation();
    var clothing_id = $(this).attr('data-clothing_id');
    console.log("Delete : " + clothing_id);
    // 更新模态框里删除按钮的链接，带上要删除的ID
    $('#delete_btn').attr('href', '/delete_person/' + clothing_id);
  });
});

这种方式把事件逻辑和HTML结构彻底分开，后期修改事件逻辑更方便，而且完全不会影响Bootstrap模态框的正常触发——因为模态框是通过data-toggle和data-target属性触发的，和我们绑定的按钮点击事件互不干扰。

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