Use htmx.on

server/router/pages/components/invoice.templ

@@ -13,10 +13,10 @@ templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool, r
 		@InvoiceStatus(hash, expiresIn, paid, redirectUrl)
 		<div class="none" id="bolt11-data" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
 		<script type="text/javascript" id="bolt11-js" hx-preserve>
-            $("#close").addEventListener("click", function () {
+            htmx.on("#close", "click", function () {
                 // abort in-flight polls and prevent new polls
                 htmx.trigger("#poll", "htmx:abort")
-                $("#poll").addEventListener("htmx:beforeRequest", e => e.preventDefault())
+                htmx.on("#poll", "htmx:beforeRequest", function (e) { e.preventDefault() })
             })
         </script>
 	</div>

server/router/pages/components/modal.templ

@@ -13,7 +13,7 @@ templ Modal(component templ.Component) {
 					@component
 				</div>
 				<script type="text/javascript">
-					$("#close").addEventListener("click", function () {
+					htmx.on("#close", "click", function () {
 						$("#modal").removeAttribute("class")
 						$("#modal").setAttribute("class", "hidden")
 						$("#modal").innerHTML = ""

server/router/pages/components/qr.templ

@@ -27,11 +27,11 @@ templ CopyButton(value string) {
 	<div class="none" id="copy-data" copy-data={ templ.JSONString(value) } hx-preserve></div>
 	<script type="text/javascript" id="copy-js" hx-preserve>
 		var value = JSON.parse($("#copy-data").getAttribute("copy-data"))
-		$("#copy").onclick = function () {
+		htmx.on("#copy", "click", function () {
 			window.navigator.clipboard.writeText(value)
 			$("#copy").textContent = "copied"
 			setTimeout(() => $("#copy").textContent = "copy", 1000)
-		}
+		})
 	</script>
 }