单击内部链接/按钮时取消/防止 Bootstrap5 崩溃

Question

我有一个包含父行的表，其中包含隐藏的子行。这些子行使用引导折叠机制显示/隐藏。单击父行可切换子行的折叠。可以动态创建父行及其子行。

父行可以包含链接和按钮。单击这些时，我想取消/防止折叠切换。下面给出一个简单的最小示例。

这里提出了类似的问题：stackoverflow - prevent bootstrap collapse from collapsing

event.stopPropgation(); 似乎不起作用（见下文），即使直接定位链接/按钮也不行（无论如何这可能对动态创建的元素没有帮助）。

我尝试听collapse events from Bootstrap 并使用.toggle() 方法撤消折叠，但这（显然）会导致递归事件。

有没有一种简单的方法来防止折叠触发行内的链接/按钮切换折叠？

$("#createNewRow").on("click", function() {
    var number = Math.round(Math.random() * 100000);
  new_row = `
    <tr data-bs-toggle="collapse" data-bs-target=".row`+number+`-child">
        <td>
        This is a dynamically created parent row. Click me to toggle childs.
        <a class="child-link" href="!#">A Link!</a>
        <button class="child-button">A button!</button>
      </td>
    </tr>
  <tr class="collapse child row`+number+`-child"><td>I'm a child row!</td></tr>
  <tr class="collapse child row`+number+`-child"><td>I'm another child row!</td></tr>
  <tr class="collapse child row`+number+`-child"><td>I'm yet another child row!</td></tr>
  `;
  $("#main-table").append(new_row);
});

$(".child-link").on("click", function(e) {
    console.log("The link was clicked!");
  e.stopPropagation();
});

$(".child-button").on("click", function(e) {
    console.log("The button was clicked!");
  e.stopPropagation();
});

$(document).on("click", ".child-link", function(e) {
    console.log("The link was clicked!");
  e.stopPropagation();
});

$(document).on("click", ".child-button", function(e) {
    console.log("The button was clicked!");
  e.stopPropagation();
});

tr {
  background-color: #fcf;
}

.child {
  background-color: #efd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">

<div class="container">
  <table class="w-100" id="main-table">
  <tr data-bs-toggle="collapse" data-bs-target=".row1-child">
    <td>
      This is a parent row. Click me to toggle childs.
      <a class="child-link" href="!#">A Link!</a>
      <button class="child-button">A button!</button>
    </td>
  </tr>
  <tr class="collapse child row1-child"><td>I'm a child row!</td></tr>
  <tr class="collapse child row1-child"><td>I'm another child row!</td></tr>
  <tr class="collapse child row1-child"><td>I'm yet another child row!</td></tr>
  </table>
</div>

<button class="mt-4" id="createNewRow">Create a new set of rows!</button>

Answer 1

这是一个很好的问题！事件的传播很棘手，

您需要有条件地分配一个事件处理程序，以防止 Bootstrap 折叠事件（show 和 hide）发生。 Collapse 事件仅在父 tr 被点击时发生。

var eventHandler = function (e) {
     console.log("The collapse event was prevented!", e);
     e.preventDefault();
     e.stopPropagation();
}

// initially prevent collapse from toggling
$(".row1-child").on("show.bs.collapse", eventHandler)

// prevent the click event on child links
$(".child-link").on("click", function(e) {
    console.log("The link was clicked!");
    e.stopPropagation();
    e.preventDefault();
});

// prevent the click event on child buttons
$(".child-button").on("click", function(e) {
    console.log("The button was clicked!");
    e.stopPropagation();
    e.preventDefault();
});

// when the parent row is clicked manually toggle the collapsible elements and re-attach event listeners
$("[data-bs-toggle]").on("click", function(e) {    
    console.log("The parent was clicked! dispatch");
    $(".row1-child").off("show.bs.collapse", eventHandler)
    $(".row1-child").off("hide.bs.collapse", eventHandler)
    $(".row1-child").collapse('toggle')
    $(".row1-child").on("show.bs.collapse", eventHandler)
    $(".row1-child").on("hide.bs.collapse", eventHandler)
});

Demo