hx-on is not working for custom events about htmx

[warcayac]

I don't think so because I previously tried (like as the reference video ) with "Hx-Trigger" and it didn't work. Instead of using hx-on I've tried hyperscript and it is working as expected.

[andryyy]

I think the problem with hx-on is that it's listening on the element it is placed on. You'd need something like hx-on-from-body. :)

[warcayac]

I've tested my code again with some variants and here my observations:

• the formats hx-on--customevent= or hx-on-customevent= are definitely not working
• the format hx-on="customevent: is working,
• the key "hx-trigger" passed as header is insensitive-case

The strange here is when I posted this issue, the format hx-on="customevent: was not working but it is now @ _ @
however that format will be deprecated as documentation, so it is not really a solution. Moreover it seems hx-on is very limited regarding the number of operations I can do, hyperscript is more flexible in this aspect.

[DioLps]

Most likely you had Typo error, seems like htmx is case sensitive went it comes to headers, so instead of hx-trigger, you use HX-Trigger it will work fine.

Eg:

`import { Elysia } from "elysia";
import { html } from '@elysiajs/html'

const app = new Elysia()
app
.use(html())
.get('/', () => {
return '

Test init

target here

<script src="https://unpkg.com/[email protected]"></script>'
})
.get('/binding', ({ set }) => {
set.headers['HX-Trigger'] = 'custom-event'

return '<span>Msg from server</span>'

})
.listen(3000);

console.log(
🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}
);
`

[DioLps]

Well I'm glad that you find another solution. But the example above it's working as well, maybe you use the "Hx-Trigger" with 'x' in lower case and it caused the issue? Not sure to be fair.

:)

[DioLps]

Nice, good job!