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)
}

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: 0 comments

Select a reply

Uh oh!

Uh oh!

Confusion over htmx events #3529

Uh oh!

Uh oh!

angrytongan Nov 17, 2025

Replies: 0 comments

angrytongan
Nov 17, 2025