diff --git a/resources/public/js/cx.js b/resources/public/js/cx.js index a658ec9..ef2dbc5 100644 --- a/resources/public/js/cx.js +++ b/resources/public/js/cx.js @@ -1,13 +1,19 @@ // Additional utilties in the vein of HTMX, driven by HTML element attributes. - // cx-toggle : CSS class to toggle on click, either on clicked element, or on cx-target + function handle_cx_toggle(e) { - [...(document.querySelectorAll('[cx-toggle]'))].forEach((el) => { - let klass = el.getAttribute('cx-toggle') - let selector = el.getAttribute('cx-target') - let target = selector ? el.closest(selector) : el; - el.addEventListener("click", (_) => target.classList.toggle(klass)) - }) + let klass = e.currentTarget.getAttribute('cx-toggle'); + let selector = e.currentTarget.getAttribute('cx-target'); + let target = selector ? e.currentTarget.closest(selector) : e.currentTarget; + target.classList.toggle(klass); } -addEventListener("DOMContentLoaded", handle_cx_toggle); -addEventListener("htmx:afterSwap", handle_cx_toggle); + +function add_handle_cx_toggle() { + document.querySelectorAll('[cx-toggle]').forEach((el) => { + el.removeEventListener('click', handle_cx_toggle); + el.addEventListener('click', handle_cx_toggle); + }); +} + +addEventListener('DOMContentLoaded', add_handle_cx_toggle); +addEventListener('htmx:afterSwap', add_handle_cx_toggle);