diff --git a/src/Scripts/hydro.js b/src/Scripts/hydro.js index 7ebdc20..b410fbc 100644 --- a/src/Scripts/hydro.js +++ b/src/Scripts/hydro.js @@ -161,11 +161,12 @@ let binding = {}; let dirty = {}; - async function hydroEvent(el, url, eventData) { + async function hydroEvent(el, hydroEventRaw, url, eventData) { const operationId = eventData.operationId; - const hydroEvent = el.getAttribute("x-on-hydro-event"); - const wireEventData = JSON.parse(hydroEvent); - await hydroRequest(el, url, { eventData: { name: wireEventData.name, data: eventData.data, subject: eventData.subject } }, 'event', wireEventData, operationId); + const hydroEvent = JSON.parse(hydroEventRaw); + el.setAttribute("hydro-operation-id", operationId); + + await hydroRequest(el, url, { eventData: { name: hydroEvent.name, data: eventData.data, subject: eventData.subject } }, 'event', hydroEvent, operationId); } async function hydroBind(el, debounce) { @@ -280,15 +281,13 @@ if (operationId) { if (!operationStatus[operationId]) { operationStatus[operationId] = 0; + } - const operationTrigger = document.querySelector(`[hydro-operation-id="${operationId}"]`); - - if (operationTrigger) { - classTimeout = setTimeout(() => operationTrigger.classList.add('hydro-request'), 200); + if (el.getAttribute('hydro-operation-id') === operationId) { + classTimeout = setTimeout(() => el.classList.add('hydro-request'), 200); - if (type !== 'bind') { - disableTimer = setTimeout(() => operationTrigger.disabled = true, 200); - } + if (type !== 'bind') { + disableTimer = setTimeout(() => el.disabled = true, 200); } } @@ -714,9 +713,11 @@ document.addEventListener('alpine:init', () => { const globalEventName = data.subject ? `global:${data.name}:${data.subject}` : `global:${data.name}`; const localEventName = data.subject ? `${component.id}:${data.name}:${data.subject}` : `${component.id}:${data.name}`; const eventPath = data.path; + const componentElement = component.element; + const eventData = el.getAttribute("x-on-hydro-event") const eventHandler = async (event) => { - await window.Hydro.hydroEvent(el, eventPath, event.detail); + await window.Hydro.hydroEvent(componentElement, eventData, eventPath, event.detail); } document.addEventListener(globalEventName, eventHandler);