Trouble triggering custom events multiple times

[nikita-kazakov]

Hi Folks, I'm trying to get an HTMX element to trigger on a custom event. The problem is that I can trigger it once successfully but not multiple times for some reason.

For example, I have the div below that I want to trigger on either a click or when a customEvent is dispatched.

<div hx-get="/tickets" hx-target="this" hx-trigger="click, customEvent from: body" hx-swap="afterend">

In Javascript, I create a custom event:

const customEvent = new Event('customEvent', { 'bubbles': true });

I load the page in my browser and launch the Inspect Element console. I then trigger this custom event on the body element:

body = document.querySelector('body')
body.dispatchEvent(customEvent)

The event is dispatched on the body element and HTMX recognizes it and properly gets the /tickets content. However, if run body.dispatchEvent(customEvent) again, nothing happens. HTMX is no longer triggering when the event is dispatched. This is what I'm having problems with. What am I doing wrong?

HTMX is properly triggering on the click handler every time I click on the div but only triggering once on the customEvent event.

I appreciate your help.

[jreviews]

A couple of things.

1. Try removing the extra space you have between from: and body. I think it's using the space as part of the selector.

<div hx-get="/tickets" hx-target="this" hx-trigger="click, customEvent from:body" hx-swap="afterend">

2. You can use the htmx Javascript API to simplify the vanilla JS code:

htmx.trigger(htmx.find('body'),'customEvent')

[nikita-kazakov]

Thank you @jreviews! Your suggestion to use htmx trigger fixed the problem! For some reason, dispatching an event though Javascript body.dispatchEvent(customEvent)only triggers an HTMX event once. Using htmx.trigger however triggers it everytime.

body = document.querySelector('body')
htmx.trigger('body','customEvent')