Why doesn't .change() work?

Question

I have the html

<span class="offersReceivedCount">3</span>

and I want to run code when the 3 value changes to something else. I'm using handlebars so the real html looks like

<span class="offersReceivedCount">{{offers}}</span> Offers Received</p>

I tried

$(".offersReceivedCount").change(function(){
console.log("change");
});

But this never logs anything when the value of {{offers}} changes

Do I need a different event type or maybe try different approach?

you need to do your change action at the same time you render your template. aside from that, the span never changes, it's replaced in full each time it's "updated" — dandavis, Feb 26 '16 at 00:24
Perhaps you are looking for something more like http://stackoverflow.com/questions/32171413/angular-ng-if-change-span-text — Wesley Smith, Feb 26 '16 at 00:26
So you are using handlebars, are you using another framework with it? — epascarello, Feb 26 '16 at 00:26
I'm using Meteor JS, they have their own way of doing event handling. — chackerian, Feb 26 '16 at 00:27
I do not use meteor so I am no help, but I know frameworks I use have the ability to watch a path for a variable change and fire a message. — epascarello, Feb 26 '16 at 00:41
I might be confused about this but is there a specific tag I should be using that will let the change event work? — chackerian, Feb 26 '16 at 00:48
As for why look at what you're monitoring - it is not changing (the `` element and its attributes). The `.text()` is, but not the element itself. — Paul Sturm, Feb 26 '16 at 00:52
The change event applies to form elements (inputs, etc.) and is triggered when *the user* changes the value. — nnnnnn, Feb 26 '16 at 00:56

score 2 · Accepted Answer · answered Feb 26 '16 at 01:31

What you need is a ReactiveVar and define an equality function on that.

Template['your-template'].onCreated = function() {
   this['offerReact'] = new ReactiveVar(this['offers'], function(oldValue, newValue) {
       if (oldValue !== newValue) {
           // run the function you want to trigger when value change 
           return false;
       } else {
           // no change, do nothing, just return true;
           return true;
       }

   });
}

So, whenever you set the new value to the offerReact, the equal function will be triggered and then start to run the event you want to run

score 1 · Answer 2 · answered Feb 26 '16 at 00:34

1

A different approach (I don't know how well it would work for you) would be to make an input "look" like a span tag, see fiddle: https://jsfiddle.net/f1a990f1/

Then your code will work sense the change function does not work with the span tag.

HTML

<input class="offersReceivedCount" type="text" value="333">
<script>
  $(".offersReceivedCount").change(function() {
    alert("change");
  });

</script>

CSS

input {
  border: none;
  outline: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
}

answered Feb 26 '16 at 00:34

Adam Buchanan Smith

9,422
5
19
39

Still will not fire because the JS changes the value and the change event still will not fire. – epascarello Feb 26 '16 at 00:36
it still won't fire because the whole dang input is replaced each update via the template... – dandavis Feb 26 '16 at 00:36
@epascarello I was attempting a creative approach (honestly did not know if it would work), thanks for the input though. – Adam Buchanan Smith Feb 26 '16 at 00:39
this is misleading. `meteor` does not work in the normal way of javascript usually do – Thai Tran Feb 26 '16 at 01:32

Why doesn't .change() work?

2 Answers2