Add FAQ or explanaition on how HX-Trigger events bubble

[thinkofher]

Hello everyone!

First off, I want to say that I really appreciate your work and found the htmx API very attractive.

Now we can move to my little issue. Let's consider following code.

<button hx-post="/event" hx-swap="innerHTML">
  Click Me
</button>
<div hx-get="/waiting" hx-trigger="myEvent" hx-swap="innerHTML">
  Waiting for myEvent.
</div>
<script>
  document.body.addEventListener("myEvent", function(evt){
    alert("myEvent was triggered!");
  })
</script>

HX-Trigger header of /event endpoint is set to myEvent. Can someone explain me why alert is firing but div with hx-trigger set to myEvent isn't?

[1cg]

The myEvent event is being triggered on the button and then bubbling up to the body which is why it is working for the script but not the element: the element is a sibling, not a parent. So, just like with a click event or any other event that bubbles, it will end up making it's way up to the body, but won't be triggered on siblings.

If you want to catch the event you need to be in the parent hierarchy of the receiving element:

<div hx-trigger="myEvent" hx-target="otherDiv"  hx-get="/waiting">
  <button hx-post="/event">
    Click Me
  </button>
</div>
<div id="otherDiv">
  Waiting for myEvent.
</div>
<script>
  document.body.addEventListener("myEvent", function(evt){
    alert("myEvent was triggered!");
  })
</script>

Here we've moved all the htmx attributes to a parent div. (I also eliminated the innerHTML since that's the default.) We are then using hx-target to target the sibling div we want replaced.

Hope that clarifies.

[clarkevans]

This seems like it's a FAQ like item; or part of a usage guide. There's no way that I'd know this nugget of information; the failed and the working example are very helpful.

[1cg]

Reopened for a doc update