An afterSwap event is not fired on swapped content

[lonix1]

A list of items with a "load more" button; the response will contain more items and a new button:

<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>

<!-- ... -->

<div id="more">
  <button hx-get="/load-items?page=2"
          hx-on:htmx:after-swap="alert('swapped!')"
          hx-target="#more"
          hx-swap="outerHTML"
  >Load next page<button>
</div>

The afterSwap and afterRequest events are not triggered. I assume that's because it removes the original content?

Is there some setting to make this work, or must I redesign the markup?

[Telroshan]

Hey,

Just as you suspected,

I assume that's because it removes the original content

Htmx indeed cleans up elements when replacing them (i.e. removes any htmx listener and internal data)

htmx/src/htmx.js

Lines 1720 to 1722 in 90a91a6

	cleanUpElement(target)
	if (target instanceof Element) {
	target.remove()

• Depending on what you want to do exactly in this case, you might rely on the htmx:beforeCleanupElement event that htmx fires right before unitializing an element (if you need to run some logic when it gets replaced, you could do it here)
• Or, you could make use of hx-preserve
• Other than that, you might indeed want to redesign your markup so your triggering element is not part of the replaced area

Feel free to give us more detail on what you're trying to achieve if you need more guidance on the implementation

Hope this helps!

[lonix1]

I think htmx:beforeCleanupElement will do the trick... very helpful, thanks!

[lonix1]

I used your advice in a StackOverflow issue. Works well, thanks again!