ugh, sorry, misread how you were trying to do it

It would be a lot cleaner if you could somehow put a class on those inputs, for sure

so the above uses an event filter to achieve what you want

kinda ugly, but if what you have is working I don't think it's a lot better to switch it up.

OK good to know that can work. As I evolved my code I found that I actually need to react to change of one control, and click on the other, and that lets me use a more direct syntax. (If both were. change, I'd have to nest, or resort to what you suggested.) So I have:

hx-trigger="change target:input[type='checkbox'],click target:[class~='htmx-update']"

Hey there. I was wondering if it was possible to somehow define multiple htmx-after-settle events that fire from different elements. For instance, an element like this:

<div hx-get="/someLink" >someStuff</div>

needs to fire a different htmx-after-settle event than for instance this

<a hx-boost="true" href="/someOtherLink">test</a>

element (These examples have no real significance, it's just to differentiate them). the reason why I'm asking is that both events need to trigger a client side script when the dom has settled (let's call them A and B). But the way I managed to implement them right now, it fires both of them when either one is triggered. Is there a way to differentiate them and only trigger client side script A with example 1 and client side script B with example 2?

Can you add listeners for the

htmx-after-settle

even on the individual links? The hyperscript way would be to define the handlers directly on elements in question:

html
 <div hx-get="/someLink" _="on htmx:afterSettle call doSomething()">someStuff</div>
 <a hx-boost="true" href="/someOtherLink" _="on htmx:afterSettle call doSomethingElse()">test</a>

Oh, ah, is the anchor inside the div?

No, it's not. They're seperate.

Oh, OK, in that case, yes, you could put the handlers on the different elements. If you are using VanillaJS you could use selectors to do this.

Alternatively, if you have a listener on the body, you could consult the

event.target

and look to see what it is, and write some logic to do things differently depending on the target

I'm obviously a fan of hyperscript, but I understand it isn't everyones cup of tea 🙂

Thank you for your reply! Perhaps I'll give hyperscript a try one day. In this particular project I already have Alpine.js loaded and using both of them in a single project might bloat things a little. Though I am intrigued by the inline javascript method you showed there using hyperscript. I wonder something similar could be done with alpine like this

x-on:click="htmx.on("htmx:afterSettle", function(evt) { doSomething() });"

. Something to try out I suppose.

yes, look at the

evt.target

you can write an if statement in there

wait

if you are using alpine, you can inline it

☝️

do that on the individual elements

Cool! Thanks for the help!

I went from jquery -> react/vue/whatever and I'm looking at leaving spa land and using htmx - do people generally use a library for the JS stuff that htmx can't do?

or stick with Vanilla

idk I always hated doing general dom manipulation w/o a quality of life library

htmx pairs pretty well w/ libraries like alpinejs

there are docs on integrating 3rd party libs here: https://htmx.org/docs/#3rd-party

htmx offers a small javascript API with some quality of life functions: https://htmx.org/reference/#api

but it isn't a complete jQuery replacement

I thought Alpine and htmx were similar but looking at the docs I think that is not true

and the api functions are pretty close to what I wanted (selector, setting event listeners) although I see you can also do that w/ alpine