Why is my change handler never being fired?

Why is my change handler never being fired?

I've got this jQuery:

  1. /* Whenever boxGrandTotal changes (which it does when any amount is entered in any of the "amount" input text elements), disable the save button if there is a discrepancy between the totals */
  2. $(document).on("change", '[id$=boxGrandTotal]', function () {
  3.     //var savebutton = $("[id$=btnSave]");
  4.     alert('entered the change handler for boxGrandTotal');
  5.     var savebutton = document.getElementById('[id$=btnSave]');
  6.     var payment = parseFloat(document.getElementById('[id$=boxPaymentAmount]').value).toFixed(2);
  7.     var total = parseFloat(document.getElementById('[id$=boxGrandTotal]').value).toFixed(2);
  8.     if (payment == null) payment = 0;
  9.     if (total == null) total = 0;
  10.     if (payment == total) {
  11.         savebutton.attr("disabled", false);
  12.         return true;
  13.     } else {
  14.         alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
  15.         savebutton.attr("disabled", true);
  16.         return false;
  17.     }
  18. });

This should fire any time boxGrandTotal is updated, right? boxGrandTotal is, indeed, being updated, but I never see "entered the change handler for boxGrandTotal"

And there *is* a TextBox / text input element whose ID ends with "boxGrandTotal"

So why is the 'change' handler not firing, when the value in boxGrandTotal *is* changing? It is changed thus:

  1. $(document).on("blur", '.amountbox', function (e) {
  2.     var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
  3.     var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
  4.     var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
  5.     var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
  6.     var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
  7.     var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
  8.     $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
  9. });