How does hx-trigger work? Give examples of modifiers and special triggers.

Summary

hx-trigger names the event that sends the request (defaults: change for inputs, submit for forms, click otherwise). Modifiers: once, changed, delay:<t> (debounce), throttle:<t>, from:<selector>, target:<selector>, consume, queue. Special triggers: load, revealed, intersect, every <t>. Filters in brackets: keyup[key=='Enter'].

Longer Answer

Several triggers are comma-separated: hx-trigger="load, every 5s". Custom events work too, including events fired by the server through the HX-Trigger header, with from:body to listen anywhere on the page. Filters are JavaScript expressions, so they need htmx.config.allowEval (true by default).

Code Example

<input name="q" hx-get="/search" hx-trigger="input changed delay:300ms, search" hx-target="#results">

Key Points

• Defaults per element type.
• delay/throttle/changed/once/from.
• load, revealed, intersect, every.
• Event filters in brackets.

Deep dive: htmx Tutorial: Triggers: hx-trigger