Why is my change handler never being fired?

Question

I've got this jQuery, derived from what was posted by Gregor Primar here:

/* 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 */

$(document).on("change", '[id$=boxGrandTotal]', function () {
    //var savebutton = $("[id$=btnSave]");
    alert('entered the change handler for boxGrandTotal');
    var savebutton = document.getElementById('[id$=btnSave]');
    var payment = parseFloat(document.getElementById('[id$=boxPaymentAmount]').value).toFixed(2);
    var total = parseFloat(document.getElementById('[id$=boxGrandTotal]').value).toFixed(2);
    if (payment == null) payment = 0;
    if (total == null) total = 0;
    if (payment == total) {
        savebutton.attr("disabled", false);
        return true;
    } else {
        alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
        savebutton.attr("disabled", true);
        return false;
    }
});

This should fire any time boxGrandTotal is updated, right? It 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"; here is how it is created in the code-behind:

boxGrandTotal = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "boxGrandTotal"
};

So why is the 'change' handler not firing, when the value in boxGrandTotal is changing? Does it only fire if the value is manually changed? If so, what is a workaround?

UPDATE

In response to kalkanbatuhan's suggestion, changing my code-behind to this:

boxGrandTotal = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "boxGrandTotal",
    ClientIDMode = System.Web.UI.ClientIDMode.Static
};

...emits two compiler-borne errors, to be specific:

'System.Web.UI.WebControls.TextBox' does not contain a definition for 'ClientIDMode'

-and:

The type or namespace name 'ClientIDMode' does not exist in the namespace 'System.Web.UI' (are you missing an assembly reference?)

UPDATE 2

BTW*, this is how the value in boxGrandTotal gets changed:

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

Answer 1

The solution is to add a ".trigger("change")" to the code that assigns the value, so that, instead of being this:

$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));

...it is this:

$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");

In more detail, the change event has to be explicitly fired when the value is changed (notice the appended ".trigger()" jazz):

$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    . . .
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");
});

...and then this code works pretty well:

/* 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 */
$(document).on("change", '[id$=boxGrandTotal]', function () {
    var savebutton = document.getElementById('[id$=btnSave]');
    var payment = $('[id$=boxPaymentAmount]').val() != '' ? parseFloat($('[id$=boxPaymentAmount]').val()) : 0;
    var total = $('[id$=boxGrandTotal]').val() != '' ? parseFloat($('[id$=boxGrandTotal]').val()) : 0;
    if (payment == null) payment = 0;
    if (total == null) total = 0;
    if (payment == total) {
        savebutton.attr("disabled", false);
        return true;
    } else {
        alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
        //savebutton.attr("disabled", true);
        savebutton.prop("disabled", true);
        return false;
    }
});

I say "pretty well" rather than "stupendously splendiferous", because the save button is not being disabled.