title: Cancel/prevent Bootstrap5 collapse when clicking inside links/buttons
body: <p>I have a table with parent rows, that have hidden child rows. These child rows are shown/hidden using the bootstrap collapse mechanic. Clicking on the parent row toggles the collapse on the child rows. Parent rows and their childs can be dynamically created.</p>
  <p>Parent rows can contain links and buttons. I want to cancel/prevent the collapse toggle when clicking on these. A simple minimum example is given below.</p>
  <p>A similar question was asked here: <a href="https://stackoverflow.com/questions/16914747/prevent-bootstrap-collapse-from-collapsing">stackoverflow - prevent bootstrap collapse from collapsing</a></p>
  <p>The <code>event.stopPropgation();</code> does not seem to work (see below), not even when targeting the link/button directly (which anyway probably won't help with dynamically created elements).</p>
  <p>I've tried to listen to the <a href="https://getbootstrap.com/docs/5.0/components/collapse/#events" rel="nofollow noreferrer">collapse events from Bootstrap</a> and use the <code>.toggle()</code> method to undo the collapse, but this (obviously) leads to a recursive event.</p>
  <p>Is there a simple method to prevent the links/buttons inside the collapse-triggering row from toggling the collapse?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#createNewRow").on("click", function() {
      var number = Math.round(Math.random() * 100000);
    new_row = `
      &lt;tr data-bs-toggle="collapse" data-bs-target=".row`+number+`-child"&gt;
          &lt;td&gt;
          This is a dynamically created parent row. Click me to toggle childs.
          &lt;a class="child-link" href="!#"&gt;A Link!&lt;/a&gt;
          &lt;button class="child-button"&gt;A button!&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;tr class="collapse child row`+number+`-child"&gt;&lt;td&gt;I'm a child row!&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="collapse child row`+number+`-child"&gt;&lt;td&gt;I'm another child row!&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="collapse child row`+number+`-child"&gt;&lt;td&gt;I'm yet another child row!&lt;/td&gt;&lt;/tr&gt;
    `;
    $("#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();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>tr {
    background-color: #fcf;
  }
  
  .child {
    background-color: #efd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"&gt;
  
  &lt;div class="container"&gt;
    &lt;table class="w-100" id="main-table"&gt;
    &lt;tr data-bs-toggle="collapse" data-bs-target=".row1-child"&gt;
      &lt;td&gt;
        This is a parent row. Click me to toggle childs.
        &lt;a class="child-link" href="!#"&gt;A Link!&lt;/a&gt;
        &lt;button class="child-button"&gt;A button!&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="collapse child row1-child"&gt;&lt;td&gt;I'm a child row!&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="collapse child row1-child"&gt;&lt;td&gt;I'm another child row!&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="collapse child row1-child"&gt;&lt;td&gt;I'm yet another child row!&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;button class="mt-4" id="createNewRow"&gt;Create a new set of rows!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>