bigskysoftware / bigskysoftware/htmx

After Swap events called on elements which have a hx-swap set to none

Open
#3,300 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

Expectation: Only elements which are swapped should have an associated event fired.
Example:

```html





Document






This is something from my main page



Name

Submit



htmx.on('htmx:afterSwap', (e) => {
console.log(e.target)
console.log(e.detail.elt)
console.log(e.detail.target)
})



```

With the response from server being

```html





Document




cool stuff




```

In the console you'll get

```

```

I think this probably only happens on the body element, and could be due to event bubbling?
htmx;afterSettle also has similar events fired.

The issue I'm facing is that because of this, there is no event that I can listen to that *only* triggers for swapped in elements, so that I can reattach my event listeners. Listening to afterSwap and reattaching it creates duplicate listeners which is not ideal. I suppose I could listen for afterSwap and filter out body as a work around, if it only happens for the body and is documented as such.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.