htmx.process doesn't seem to process

[Coysh]

I'm using htmx through the sprig implementation for Craft CMS. I love it.

I'm using javascript to dynamically inject some <input sprig type="checkbox" beneath some existing checkboxes. The initial <input trigger a htmx call when clicked - but the injected ones do not.

htmx.ajax("POST", "XX", {
	values: {},
	target: container,
	swap: "innerHTML",
}).then(() => {
	const $htmxComponents = document.querySelectorAll('.sprig-component');

	if($htmxComponents) {
		$htmxComponents.forEach($htmxComponent => {
			htmx.process($htmxComponent);
		});
	}
});

So my initial htmx load is: <input sprig type="checkbox" value="1" name="location[]">

And when the above htmx is loaded is then looks like

<input sprig type="checkbox" value="1" name="location[]">
<input sprig type="checkbox" value="2" name="location[]">

Clicking the first <input works, but the second isn't triggering anything.

[MichaelWest22]

The htmx ajax request will perform a swap and the content will have the htmx process command called on all the swapped in content already as this is how htmx works to activate all the content that it swaps in. You should only call htmx.process on content added to the DOM not via htmx. Also note that the inputs you have listed here are not htmx enabled in any way and do not require any htmx init code anyway. inputs inside an htmx enabled form just emit standard browser events when they are ticked which can trigger wrapping htmx enabled forms that listen on events like "input". And when the form is submitted by htmx via whatever event it will gather up all inputs values it contains to perform the request.

It is likely that something else is happening that is not working. you can try using htmx.logAll() in the console as this may help. Also try with both of the inputs in the initial load to see if it works in this case. I would also try inspecting the live page to confirm the inputs are being swapped in the location and way you expect and look valid in the DOM at the time before you try clicking them.