htmx hx-beforeSwap and hx-target
Ok, while experimenting with htmx I've come across a problem regaring the triggered events. My setup is that I have a select element which fetches data and should put the data to another element (hx-target). Furthermore I wanted to manipulate the response from the server before showing on the page. My idea was to use the hx-on:htmx:before-swap event to transform the response but sadly the beforeSwap event was not fired. Turns out it looks like the events are bound to the element and so the event itself was fired but it didn't show via hx-on:htmx:before-swap on the select element BUT on the target element.
So, remember to add the hx-on:htmx:before-swap to the referenced target element instead of the calling element!
<div>
<select name="select" id="select" hx-params="none" hx-trigger="load,change" hx-get="/api/dostuff/" hx-target="#string">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<div hx-on:htmx:before-swap="transform(event)" id="string"></div>
</div>