Confusion over htmx events #3529

angrytongan · 2025-11-17T09:08:32Z

angrytongan
Nov 17, 2025

The documentation for htmx:afterSwap states that detail.elt is the swapped in element, and detail.target is the target of the request.

The sample below prints both of these elements on a swap. In this example, both are the same; I was expecting detail.elt to show the returned list element.

Can anyone point me at where I'm going wrong?

import (
	"io"
	"log"
	"net/http"
)

const (
	indexHTML = `
<!doctype html>

<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"></script>
		<script src="https://unpkg.com/[email protected]"></script>

		<script type="text/hyperscript">
			on htmx:afterSwap
				log 'event.detail.elt', event.detail.elt
				log 'event.detail.target', event.detail.target
		</script>
	</head>

	<body>
		<button	hx-post="/clicked"
				hx-target="#thelist"
				hx-swap="afterbegin"
				>Add to list</button>
		<ul id="thelist">
		</ul>
	</body>
</html>
	`
)

func main() {
	indexHandler := func(w http.ResponseWriter, r *http.Request) {
		w.WriteHeader(http.StatusOK)
		_, _ = io.WriteString(w, indexHTML)
	}

	clickHandler := func(w http.ResponseWriter, r *http.Request) {
		w.WriteHeader(http.StatusOK)
		_, _ = io.WriteString(w, "<li>hello world</li>")
	}

	http.HandleFunc("GET /", indexHandler)
	http.HandleFunc("POST /clicked", clickHandler)

	log.Println("listening on port 8081")
	_ = http.ListenAndServe(":8081", nil)
}

MichaelWest22 · 2025-11-17T20:24:01Z

MichaelWest22
Nov 17, 2025
Collaborator

When htmx inserts content it can insert multiple nodes in multiple locations relative to the target based on the swap style like afterbegin. So its not practical to provide the actual swapped in target elements and you only have access to the detail.target which is the elt it was placed near (or inside for innerHTML). And with outerHTML the target is removed from the DOM and replaced with one or more nodes so it is even harder to track. the detail.elt is always actually the elt that makes the request and so in your example detail.elt should be a button and detail.target should be the

4 replies

angrytongan Nov 17, 2025
Author

Thanks Michael. So sorry, still a bit confused; the example above gives me the list as both elt and target after clicking the button:

Just trying to figure out if I'm not understanding this correctly, if my sample is wrong, if the docs are incorrect, or if this is a bug 🤷

MichaelWest22 Nov 18, 2025
Collaborator

sorry i think i'm wrong on a few things there. This afterSwap event is a little different than most htmx events in that it fires on all settled elts. This is designed for the outerHTML swap style so that with this style the target is replaced as i mentioned but we still want to get the afterSwap event on the replaced element so if an outerHTML swap swaps in two nodes each will get its own afterSwap event with detail.elt equal to the swapped in node while detail.target will be the original target which is now removed from the DOM during the outerHTML swap. But for innerHTML and the other relative to target swap styles this does not work and is normally not needed as the target is not removed so instead it just fires afterSwap one time on the target element. Fom this target.elt you can then find the newley inserted nodes based on the relative swap style. For innerHTML it is trivial as you just have the swapped node with new child content as expected but with afterbegin you would need to find the first child or children of the detail.elt to find what was inserted.

MichaelWest22 Nov 18, 2025
Collaborator

Also the htmx:load event may sometimes be more useful as it is fired on each new elt inserted by htmx

angrytongan Nov 18, 2025
Author

👍 Thanks Michael. I will experiment a bit more and have a look at the code to get my head around this.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Confusion over htmx events #3529

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Confusion over htmx events #3529

Uh oh!

Uh oh!

angrytongan Nov 17, 2025

Replies: 1 comment · 4 replies

Uh oh!

MichaelWest22 Nov 17, 2025 Collaborator

Uh oh!

angrytongan Nov 17, 2025 Author

Uh oh!

MichaelWest22 Nov 18, 2025 Collaborator

Uh oh!

MichaelWest22 Nov 18, 2025 Collaborator

Uh oh!

angrytongan Nov 18, 2025 Author

angrytongan
Nov 17, 2025

Replies: 1 comment 4 replies

MichaelWest22
Nov 17, 2025
Collaborator

angrytongan Nov 17, 2025
Author

MichaelWest22 Nov 18, 2025
Collaborator

MichaelWest22 Nov 18, 2025
Collaborator

angrytongan Nov 18, 2025
Author