Do not execute hx-trigger="load" on re-initialization of an existing …

…node (#2976) * Do not execute hx-trigger="load" on re-initialization of an existing node * simplify initNode firstInit logic
bigskysoftware · Dec 11, 2024 · 34dda10 · 34dda10
1 parent bd35f64
commit 34dda10
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -693,6 +693,7 @@ var htmx = (function() {
    * @property {XMLHttpRequest} [xhr]
    * @property {(() => void)[]} [queuedRequests]
    * @property {boolean} [abortable]
+   * @property {boolean} [firstInitCompleted]
    *
    * Event data
    * @property {HtmxTriggerSpecification} [triggerSpec]
@@ -1625,7 +1626,7 @@ var htmx = (function() {
       })
     }
     deInitOnHandlers(element)
-    forEach(Object.keys(internalData), function(key) { delete internalData[key] })
+    forEach(Object.keys(internalData), function(key) { if (key !== 'firstInitCompleted') delete internalData[key] })
   }
 
   /**
@@ -2632,7 +2633,7 @@ var htmx = (function() {
       }, observerOptions)
       observer.observe(asElement(elt))
       addEventListener(asElement(elt), handler, nodeData, triggerSpec)
-    } else if (triggerSpec.trigger === 'load') {
+    } else if (!nodeData.firstInitCompleted && triggerSpec.trigger === 'load') {
       if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
         loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
       }
@@ -2839,11 +2840,12 @@ var htmx = (function() {
       return
     }
     const nodeData = getInternalData(elt)
-    if (nodeData.initHash !== attributeHash(elt)) {
+    const attrHash = attributeHash(elt)
+    if (nodeData.initHash !== attrHash) {
       // clean up any previously processed info
       deInitNode(elt)
 
-      nodeData.initHash = attributeHash(elt)
+      nodeData.initHash = attrHash
 
       triggerEvent(elt, 'htmx:beforeProcessNode')
 
@@ -2868,6 +2870,7 @@ var htmx = (function() {
         initButtonTracking(elt)
       }
 
+      nodeData.firstInitCompleted = true
       triggerEvent(elt, 'htmx:afterProcessNode')
     }
   }

diff --git a/test/core/api.js b/test/core/api.js
@@ -393,6 +393,17 @@ describe('Core htmx API test', function() {
     div.innerHTML.should.equal('delete')
   })
 
+  it('does not trigger load on re-init of an existing element', function() {
+    this.server.respondWith('GET', '/test', 'test')
+    var div = make('<div hx-get="/test" hx-trigger="load" hx-swap="beforeend"></div>')
+    this.server.respond()
+    div.innerHTML.should.equal('test')
+    div.setAttribute('hx-swap', 'afterbegin')
+    htmx.process(div)
+    this.server.respond()
+    div.innerHTML.should.equal('test')
+  })
+
   it('onLoad is called... onLoad', function() {
     // also tests on/off
     this.server.respondWith('GET', '/test', "<div id='d1' hx-get='/test'></div>")