In my table, there are parent rows with hidden child rows that can be toggled using the bootstrap collapse feature. Clicking on a parent row toggles the visibility of its child rows. Both parent and child rows can be dynamically added to the table.
Parent rows may contain links and buttons, and I want to prevent the collapse toggle when these links or buttons are clicked. An example is provided below:
A related question was posted on Stack Overflow: stackoverflow - prevent bootstrap collapse from collapsing
Using event.stopPropagation(); does not seem to work, even when targeting the link/button directly. It also does not address the issue with dynamically created elements. I tried listening to the collapse events from Bootstrap and using the .toggle() method to reverse the collapse, but this triggers a recursive event.
Is there a straightforward way to prevent links/buttons within the collapse-triggering row from toggling the collapse?
$("#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc0">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289978996">[email protected]</a>/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>