bigskysoftware / bigskysoftware/htmx

Document kebab-case event names for hx-on

Open
#2,201 1 comment 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 19h
Merged PRs (30d)
31

Description

I just spent quite a bit of time debugging why `hx-on:htmx:afterOnLoad` wasn't firing.

The [docs](https://htmx.org/docs/#hx-on) say it isn't possible to handle this event with `hx:on`:

> Note that HTML attributes are case insensitive. This means that, unfortunately, events that rely on capitalization/ camel casing, cannot be responded to.

And the `debug` extension only displays the camelCase event names.

However, buried deeper in that same paragraph in the docs the very solution to this limitation is provided:

> htmx dispatches all its events in both camelCase and in kebab-case for this very reason.

I eventually figured out that `hx-on:htmx:after-on-load` very much does the trick.

This was much harder to find than it should have been.

Ideally https://htmx.org/events/ should be updated to included all kebab-case events as well. Or event better, it should **only mention the kebab-case event names as those work everywhere**. The camelCase event names can remain supported in the library for backwards compatibility.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.