diff --git a/src/htmx.js b/src/htmx.js index 5f87cb82..9fd7d63b 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1411,9 +1411,12 @@ return (function () { } else { eltsToListenOn = [elt]; } - // store the initial value of the element so we can tell if it changes + // store the initial values of the elements, so we can tell if they change if (triggerSpec.changed) { - elementData.lastValue = elt.value; + eltsToListenOn.forEach(function (eltToListenOn) { + var eltToListenOnData = getInternalData(eltToListenOn); + eltToListenOnData.lastValue = eltToListenOn.value; + }) } forEach(eltsToListenOn, function (eltToListenOn) { var eventListener = function (evt) { @@ -1453,11 +1456,11 @@ return (function () { } } if (triggerSpec.changed) { - if (elementData.lastValue === elt.value) { + var eltToListenOnData = getInternalData(eltToListenOn) + if (eltToListenOnData.lastValue === eltToListenOn.value) { return; - } else { - elementData.lastValue = elt.value; } + eltToListenOnData.lastValue = eltToListenOn.value } if (elementData.delayed) { clearTimeout(elementData.delayed); diff --git a/test/attributes/hx-trigger.js b/test/attributes/hx-trigger.js index 078d8891..77b8364b 100644 --- a/test/attributes/hx-trigger.js +++ b/test/attributes/hx-trigger.js @@ -42,6 +42,74 @@ describe("hx-trigger attribute", function(){ div.innerHTML.should.equal("Requests: 1"); }); + it('changed modifier works along from clause with single input', function() + { + var requests = 0; + this.server.respondWith("GET", "/test", function (xhr) { + requests++; + xhr.respond(200, {}, "Requests: " + requests); + }); + var input = make(''); + make('
') + var div = make(''); + input.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + input.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + input.value = "bar"; + input.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + input.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + }); + + it('changed modifier works along from clause with two inputs', function() + { + var requests = 0; + this.server.respondWith("GET", "/test", function (xhr) { + requests++; + xhr.respond(200, {}, "Requests: " + requests); + }); + var input1 = make(''); + var input2 = make(''); + make('') + var div = make(''); + + input1.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + input2.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + + input1.value = "bar"; + input2.click(); + this.server.respond(); + div.innerHTML.should.equal(""); + input1.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + + input1.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + input2.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + + input2.value = "foo"; + input1.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 1"); + input2.click(); + this.server.respond(); + div.innerHTML.should.equal("Requests: 2"); + }); + it('once modifier works', function() { var requests = 0;