diff --git a/src/htmx.js b/src/htmx.js index 7792941d3..e71e1445c 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -4910,23 +4910,30 @@ var htmx = (function() { * @returns {HtmxExtension[]} */ function getExtensions(elt, extensionsToReturn, extensionsToIgnore) { - if (extensionsToReturn == undefined) { + const isParentScan = !!extensionsToReturn + if (!extensionsToReturn) { extensionsToReturn = [] } - if (elt == undefined) { + if (!elt) { return extensionsToReturn } - if (extensionsToIgnore == undefined) { + if (!extensionsToIgnore) { extensionsToIgnore = [] } const extensionsForElement = getAttributeValue(elt, 'hx-ext') if (extensionsForElement) { forEach(extensionsForElement.split(','), function(extensionName) { - extensionName = extensionName.replace(/ /g, '') - if (extensionName.slice(0, 7) == 'ignore:') { + extensionName = extensionName.trim() + if (extensionName.indexOf('ignore:') === 0) { extensionsToIgnore.push(extensionName.slice(7)) return } + if (extensionName.indexOf('this-only:') === 0) { + if (isParentScan) { + return + } + extensionName = extensionName.slice(10) + } if (extensionsToIgnore.indexOf(extensionName) < 0) { const extension = extensions[extensionName] if (extension && extensionsToReturn.indexOf(extension) < 0) { diff --git a/test/attributes/hx-ext.js b/test/attributes/hx-ext.js index b573c4ddf..c00592e65 100644 --- a/test/attributes/hx-ext.js +++ b/test/attributes/hx-ext.js @@ -156,4 +156,28 @@ describe('hx-ext attribute', function() { ext5Calls.should.equal(1) }) + + it('Extensions can be applied to this element only properly', function() { + this.server.respondWith('GET', '/test', 'Clicked!') + + make('
Click Me!' + + '
') + + var div1 = byId('div-AA') + var btn2 = byId('btn-BB') + + btn2.click() + this.server.respond() + ext1Calls.should.equal(0) + ext2Calls.should.equal(1) + ext3Calls.should.equal(0) + + div1.click() + this.server.respond() + ext1Calls.should.equal(1) + ext2Calls.should.equal(2) + ext3Calls.should.equal(0) + + ext5Calls.should.equal(1) + }) }) diff --git a/www/content/attributes/hx-ext.md b/www/content/attributes/hx-ext.md index 65dcbb6b7..35abaed49 100644 --- a/www/content/attributes/hx-ext.md +++ b/www/content/attributes/hx-ext.md @@ -14,8 +14,7 @@ and on the `body` tag for it to apply to all htmx requests. * `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM hierarchy and it will apply to all child elements. -* You can ignore an extension that is defined by a parent node using `hx-ext="ignore:extensionName"` - +* You can ignore an extension that is defined by a parent element using `hx-ext="ignore:extensionName"` ```html
@@ -26,3 +25,12 @@ hierarchy and it will apply to all child elements.
``` +* If an extension needs to apply only to a single element you can override inheritance on an element using `hx-ext="this-only:extensionName"` + +```html +
+
+ ... but it will not be used in this part. +
+
+```