How can I skip triggering bootstrap collapse when clicking on link within collapse element?
css, html, javascript, jquery, twitter-bootstrap
Solution
Use event.stopPropagation() at click event.
http://api.jquery.com/event.stoppropagation/
$("table.table td a").on('click', function (e) { e.stopPropagation(); })
To understand why event bubbling up the DOM tree please read http://api.jquery.com/category/events/event-object/
Problem
I am using the Twitter Bootstrap collapse function to hide a table row. I also have a link in the text within the span that triggers the collapse/expand. Unfortunately, when I click on the link, the collapsed text is first expanded, and then the link is followed. I'd like to be able to skip triggering the collapse toggle when clicking on the link. Here's some code that demonstrates the issue (live jsfiddle example here): ``` <table class="table"> <tr data-toggle="collapse" data-target="#collapseRow1" style="cursor: pointer;"> <td>Click me to show more!</td> <td><a href="http://getbootstrap.com/css/">but don't expand after clicking this link</a></td> </tr> <tr class="collapse" id="collapseRow1"> <td>hidden content1</td> <td /> </tr> </table> ```