Clarify that hx-trigger:from doesn't dynamically update (#2696)

* Fix typo

* Clarity that 'from' doesn't update as the page changes
This commit is contained in:
Christopher Jefferson
2024-07-09 01:50:17 +08:00
committed by GitHub
parent eb1b723ea7
commit 10f45c321e
3 changed files with 3 additions and 2 deletions

View File

@@ -4,7 +4,7 @@ theme = "htmx-theme"
compile_sass = false
build_search_index = false
generate_feed = true
generate_feeds = true
taxonomies = [
{ name = "tag", render = false, feed = true },

View File

@@ -56,6 +56,7 @@ is seen again it will reset the delay.
is seen again before the delay completes, it is ignored, the element will trigger at the end of the delay.
* `from:<Extended CSS selector>` - allows the event that triggers a request to come from another element in the document (e.g. listening to a key event on the body, to support hot keys)
* A standard CSS selector resolves to all elements matching that selector. Thus, `from:input` would listen on every input on the page.
* The CSS selector is only evaluated once and is not re-evaluated when the page changes. If you need to detect dynamically added elements use an event filter, for example `click[event.target.matches('input')]`
* The extended CSS selector here allows for the following non-standard CSS values:
* `document` - listen for events on the document
* `window` - listen for events on the window

View File

@@ -246,7 +246,7 @@ issuing the request. If the event triggers again, the countdown is reset.
* `throttle:<time interval>` - wait the given amount of time (e.g. `1s`) before
issuing the request. Unlike `delay` if a new event occurs before the time limit is hit the event will be discarded,
so the request will trigger at the end of the time period.
* `from:<CSS Selector>` - listen for the event on a different element. This can be used for things like keyboard shortcuts.
* `from:<CSS Selector>` - listen for the event on a different element. This can be used for things like keyboard shortcuts. Note that this CSS selector is not re-evaluated if the page changes.
You can use these attributes to implement many common UX patterns, such as [Active Search](@/examples/active-search.md):