diff options
| author | Alexander Petros <apetros15@gmail.com> | 2023-08-01 15:28:29 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-01 14:28:29 -0500 |
| commit | 7ce53d4ce83acb434db88eed7ed90622a6c44b95 (patch) | |
| tree | dcac08eff8750710225bc64d3e3225ec818f13d2 | |
| parent | 6fddb9b8bb062fa085165d360c6a76c0c74d38e2 (diff) | |
| download | htmx-7ce53d4ce83acb434db88eed7ed90622a6c44b95.tar.gz htmx-7ce53d4ce83acb434db88eed7ed90622a6c44b95.zip | |
Tighten up hx-on docs (#1648)
Make the docs a little bit shorter so that the old form is still
documented without repeating information (and the new form is
emphasized). I also fixed a misplaced double quote in one of the
examples.
| -rw-r--r-- | www/content/attributes/hx-on.md | 17 |
1 files changed, 5 insertions, 12 deletions
diff --git a/www/content/attributes/hx-on.md b/www/content/attributes/hx-on.md index af8ffc05..57bc03b3 100644 --- a/www/content/attributes/hx-on.md +++ b/www/content/attributes/hx-on.md @@ -7,11 +7,10 @@ The `hx-on` attribute allows you to embed scripts inline to respond to events di `hx-on` improves upon `onevent` by enabling the handling of any event for enhanced [Locality of Behaviour (LoB)](/essays/locality-of-behaviour/). This also enables you to handle any htmx event. There are two forms of this attribute, one in which you specify the event as part of the attribute name -after a colon (`hx-on:click`, for example), and one that uses the `hx-on` attribute directly. The -latter form should only be used if IE11 support is required. +after a colon (`hx-on:click`, for example), and a deprecated form that uses the `hx-on` attribute directly. The +latter should only be used if IE11 support is required. -### Forms -#### hx-on:* (recommended) +### hx-on:* (recommended) The event name follows a colon `:` in the attribute, and the attribute value is the script to be executed: ```html @@ -40,23 +39,17 @@ events, and omit the "htmx" part: Adding multiple handlers is easy, you just specify additional attributes: ```html <button hx-get="/info" - hx-on::before-request="alert('Making a request!'") + hx-on::before-request="alert('Making a request!')" hx-on::after-request="alert('Done making a request!')"> Get Info! </button> ``` -#### hx-on (deprecated, except for IE11 support) +### hx-on (deprecated) The value is an event name, followed by a colon `:`, followed by the script: ```html -<div hx-on="click: alert('Clicked!')">Click</div> -``` - -And htmx events: - -```html <button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')"> Get Info! </button> |