diff --git a/internal/view/static/js/app.js b/internal/view/static/js/app.js index 2a0da23..b865569 100644 --- a/internal/view/static/js/app.js +++ b/internal/view/static/js/app.js @@ -1,9 +1,9 @@ import { initNotyf } from './init-notyf.js' -import { initHTMXTriggers } from './init-htmx-triggers.js' +import { initHTMX } from './init-htmx.js' import { initAlpineComponents } from './init-alpine-components.js' import { initCopyFunction } from './init-copy-function.js' initNotyf() -initHTMXTriggers() +initHTMX() initAlpineComponents() initCopyFunction() diff --git a/internal/view/static/js/init-htmx-triggers.js b/internal/view/static/js/init-htmx.js similarity index 70% rename from internal/view/static/js/init-htmx-triggers.js rename to internal/view/static/js/init-htmx.js index add70dc..04a748b 100644 --- a/internal/view/static/js/init-htmx-triggers.js +++ b/internal/view/static/js/init-htmx.js @@ -1,4 +1,4 @@ -export function initHTMXTriggers () { +export function initHTMX () { const triggers = { ctm_alert: function (evt) { const message = decodeURIComponent(evt.detail.value) @@ -42,4 +42,19 @@ export function initHTMXTriggers () { for (const key in triggers) { document.addEventListener(key, triggers[key]) } + + /* + This fixes this issue: + https://stackoverflow.com/questions/73658449/htmx-request-not-firing-when-hx-attributes-are-added-dynamically-from-javascrip + */ + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node.nodeType === 1 && !node['htmx-internal-data']) { + htmx.process(node) + } + }) + }) + }) + observer.observe(document, { childList: true, subtree: true }) } diff --git a/package.json b/package.json index ad814e8..d02f8d7 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "location", "toaster", "Alpine", - "Notyf" + "Notyf", + "htmx", + "MutationObserver" ] } } \ No newline at end of file