itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix hx-on:* examples to use kebab-case event names, add clarification (#1611)

Browse Source
This commit is contained in:
Elnu 2023-07-18 15:41:52 -07:00 committed by GitHub
parent 2534a970b6
commit 65bd1e15b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
www/content/attributes/hx-on.md
View File

@ -19,7 +19,8 @@ The event name follows a colon `:` in the attribute, and the attribute value is
``` ```
All htmx events can be captured, too! Make sure to use the [kebab-case event name](@/docs.md#events), All htmx events can be captured, too! Make sure to use the [kebab-case event name](@/docs.md#events),
because DOM attributes do not preserve casing. because DOM attributes do not preserve casing. For instance, `hx-on::beforeRequest` **will not work:**
use `hx-on::before-request` instead.
To make writing these a little easier, you can use the shorthand double-colon `hx-on::` for htmx To make writing these a little easier, you can use the shorthand double-colon `hx-on::` for htmx
events, and omit the "htmx" part: events, and omit the "htmx" part:
@ -39,8 +40,8 @@ events, and omit the "htmx" part:
Adding multiple handlers is easy, you just specify additional attributes: Adding multiple handlers is easy, you just specify additional attributes:
```html ```html
<button hx-get="/info" <button hx-get="/info"
hx-on::beforeRequest="alert('Making a request!'") hx-on::before-request="alert('Making a request!'")
hx-on::afterRequest="alert('Done making a request!')"> hx-on::after-request="alert('Done making a request!')">
Get Info! Get Info!
</button> </button>
``` ```