Replies: 3 comments
-
|
You can simply separate the two links or am I missing something? <div>
<a data-bs-toggle="collapse" href="#collapsewithlink" role="button" aria-expanded="false" aria-controls="collapsewithlink">Click Me</a>
<a class="prevent-bubble" id="div3" href="example.com">I'm a link</a>
</div>
<div class="collapse" id="collapsewithlink">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
You're very close! You're stopping the event propagation correctly using e.stopPropagation(), but the link is not opening because you're not allowing the default behavior of the tag (which is navigation). $(document).on('click', '.prevent-bubble', function(e) {
e.stopPropagation(); // Prevents triggering collapse
// Do NOT call e.preventDefault() here so the link works
}); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for pointing that out, AshikurRahman-Peters. That makes sense now. I was wondering why the link wasn't navigating, even though stopPropagation() was working. I had assumed I needed preventDefault() too, but that was blocking the link behavior. Tested it just now without preventDefault(), and the link opens as expected while the collapse stays untouched. Appreciate the clarification! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
How can I make sure the event propagation stops when clicking the link and the link is opened instead of the collapse triggered?
https://codepen.io/jenyckee/pen/JodPBXY
Beta Was this translation helpful? Give feedback.
All reactions