jQuery Forum

I have several input type="number" elements which, when they change, should update a "total" element of the same type. I gave all the input elements which should contribute to the total the class "payments" like so:

1. <input class="payments" type="number" step="0.01" min="0" id="airfare" />
2. . . .
3. <input type="number" step="0.01" min="0" id="paymenttotal" />

...and then thought I could respond to a change in any element with this class like so:

1.     'change .payments' : function(event){
            var paymentTot = $('#paymenttotal').val();
            paymentTot = paymentTot + this.val();
            $('#paymenttotal').val(paymentTot);
         }

It may look a little "weird" because it is in a Meteor template method, but it works as far as responding when it should. That is to say, this:

1. 'change .payments' : function(event){
       console.log('something changed');
   }

...caused that log entry to be made every time I changed the value in any of the elements of that class. However, the code where I tried to get the val from whichever element was being responded to in that handler (I guessed -- wrongly, I reckon -- that I could refer to it as "this"), fails. It gives me "Uncaught TypeError: this.val is .... not a function"

How can I refer to whichever input is invoking the change event?