Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyIn htmx, you can stop a nested hx-get from triggering its parent by using the
Here's an example of how you can use it:
In this example, when you click on the "Child" div, it will trigger its own hx-get request, but it will not trigger the hx-get request of the "Parent" div. This is because the
How can I stop a nested hx-get in htmx from triggering its parent?
In htmx, I’ve set up two nested divs with hx-get. When I click the inner div, it also triggers the hx-get of the outer div. I tried using hx-disinherit, but it didn’t help. How can I stop the outer div’s hx-get from being activated without diving into JavaScript?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyIn htmx, you can stop a nested hx-get from triggering its parent by using the hx-swap-oob attribute. This attribute stands for "out of band" and it allows you to specify that certain elements should be swapped out of band, meaning they will not trigger their parent elements.Here's an example of how you can use it:
<div hx-get="/parent" hx-trigger="click">
Parent
<div hx-get="/child" hx-trigger="click" hx-swap-oob="true">
Child
</div>
</div>
In this example, when you click on the "Child" div, it will trigger its own hx-get request, but it will not trigger the hx-get request of the "Parent" div. This is because the
hx-swap-oob="true" attribute is set on the "Child" div, which prevents it from triggering its parent.