Trigger events on new content, rather than triggering element, since …

…triggering element may have been replaced fixes bigskysoftware/htmx#79
strangeRabbit777 · Jun 10, 2020 · 6a6070d · 6a6070d
1 parent 9e758cd
commit 6a6070d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1406,7 +1406,7 @@ return (function () {
                         }
                         // don't process 'No Content' response
                         if (this.status !== 204) {
-                            if (!triggerEvent(elt, 'beforeSwap.htmx', eventDetail)) return;
+                            if (!triggerEvent(target, 'beforeSwap.htmx', eventDetail)) return;
 
                             var resp = this.response;
                             withExtensions(elt, function(extension){
@@ -1430,8 +1430,8 @@ return (function () {
                                         if (elt.classList) {
                                             elt.classList.add("htmx-settling");
                                         }
+                                        triggerEvent(elt, 'afterSwap.htmx', eventDetail);
                                     });
-                                    triggerEvent(elt, 'afterSwap.htmx', eventDetail);
                                     if (anchor) {
                                         location.hash = anchor;
                                     }
@@ -1443,12 +1443,12 @@ return (function () {
                                             if (elt.classList) {
                                                 elt.classList.remove("htmx-settling");
                                             }
+                                            triggerEvent(elt, 'afterSettle.htmx', eventDetail);
                                         });
                                         // push URL and save new page
                                         if (shouldSaveHistory) {
                                             pushUrlIntoHistory(pushedUrl || path);
                                         }
-                                        triggerEvent(elt, 'afterSettle.htmx', eventDetail);
                                     }
 
                                     if (swapSpec.settleDelay > 0) {

diff --git a/test/core/events.js b/test/core/events.js
@@ -82,5 +82,41 @@ describe("Core htmx Events", function() {
         }
     });
 
+    it("afterSwap.htmx is called when replacing outerHTML", function () {
+        var called = false;
+        var handler = htmx.on("afterSwap.htmx", function (evt) {
+            called = true;
+        });
+        try {
+            this.server.respondWith("POST", "/test", function (xhr) {
+                xhr.respond(200, {}, "<button>Bar</button>");
+            });
+            var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
+            div.click();
+            this.server.respond();
+            should.equal(called, true);
+        } finally {
+            htmx.off("afterSwap.htmx", handler);
+        }
+    });
+
+    it("afterSettle.htmx is called when replacing outerHTML", function () {
+        var called = false;
+        var handler = htmx.on("afterSettle.htmx", function (evt) {
+            called = true;
+        });
+        try {
+            this.server.respondWith("POST", "/test", function (xhr) {
+                xhr.respond(200, {}, "<button>Bar</button>");
+            });
+            var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
+            div.click();
+            this.server.respond();
+            should.equal(called, true);
+        } finally {
+            htmx.off("afterSettle.htmx", handler);
+        }
+    });
+
 });