#4103·htmx

Upgrade guide maps htmx:load and htmx:afterOnLoad to htmx:after:init, which fires at different times

Author: mdesco-crglCreated Sep 24, 2026Updated Sep 24, 2026

The htmx 2 to 4 upgrade material maps both htmx:load and htmx:afterOnLoad to htmx:after:init:

htmx:after:init fires once, when htmx initializes an element that has hx-* attributes. It matches neither htmx 2 event.

Reproduction

A page has <button id="btn" hx-get="/plain" hx-target="#out">. The response is <p id="plain">, with no hx-* attributes. Document listeners log each event.

Event Page load After click and swap
2.0.10 htmx:load body #plain
2.0.10 htmx:afterOnLoad none #btn
4.0.0 htmx:after:init #btn none
4.0.0 htmx:after:process body #plain
4.0.0 htmx:after:request none #btn

Impact

  • A htmx:load handler moved to htmx:after:init never runs on swapped content without hx-* attributes, for example tooltip setup.
  • A htmx:afterOnLoad handler moved to htmx:after:init runs at page load, not after the request. A row with on htmx:afterOnLoad remove me is removed as soon as the page loads.

Proposed mapping

  • htmx:load to htmx:after:process. htmx.onLoad() already listens for this event.
  • htmx:afterOnLoad to htmx:after:request. It fires before the swap, while the requesting element is still in the DOM.