Why is my blur event handler not firing?

Question

I've got this jQuery to update the total when amounts are entered into any of the five "amount" boxes:

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '[id^="boxAmount"]', function (e) {
    alert('in the boxamount blur handler');
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseInt($('[id$=boxAmount1]').val()) : 0;
    // jakecigar's idea: add this just in case a user enters something other than a number: if ($.isNaN(amount1) amount1=0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseInt($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseInt($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseInt($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseInt($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    alert(grandtotal);
    $('[id$=boxGrandTotal]').val(grandtotal);
});

In Sµßhrånil∂'s fiddle here, it works just dandy. But for me, I never see the alert I added ("in the boxamount blur handler").

At first I thought that it was because I had failed to assign IDs to the five boxAmount input texts - it was true that I had forgotten that. But even after adding the IDs, like so:

boxAmount1 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "boxAmount1",
    Width = TEXTBOX_WIDTH
};
cellColAmount1.Controls.Add(boxAmount1);

...the handler is not reached.

Now it is a fact that most of the "boxAmount"s are created dynamically, in a sense - they are made visible conditionally by the user. However, that first one, shown above ("boxAmount1") is always visible, and so should always be "findable." But even on exiting/blurring out of that particular input text, I do not see "in the boxamount blur handler".

Why not? How can I light a fire under this handler to make it responsive to the exit/blur event?

"boxAmount1" does indeed appear in the "View Source":

input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount1" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount1" class="finaff-webform-field-input" style="width:88px;" />

• and, in fact, all the others do, too (boxAmount2...boxAmount5).

Answer 1

Select the DOM object by id directly; should be:

$([id^="boxAmount"]).on("blur", function (e) {
   ...
}

Answer 2

Firing blur event on id try it with the input blur with class finaff-webform-field-input. because same id could not be multiple time on the same page :

Here is the class blur event

 /* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
    $(document).on("blur", '.dplatypus-webform-field-input', function (e) {
        alert('in the boxamount blur handler');
        var amount1 = $('#boxAmount1').val() != '' ? parseInt($('#boxAmount1').val()) : 0;
        // jakecigar's idea: add this just in case a user enters something other than a number: if ($.isNaN(amount1) amount1=0;
        var amount2 = $('#boxAmount2').val() != '' ? parseInt($('#boxAmount2').val()) : 0;
        var amount3 = $('#boxAmount3').val() != '' ? parseInt($('#boxAmount3').val()) : 0;
        var amount4 = $('#boxAmount4').val() != '' ? parseInt($('#boxAmount4').val()) : 0;
        var amount5 = $('#boxAmount5').val() != '' ? parseInt($('#boxAmount5').val()) : 0;
        var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
        alert(grandtotal);
        $('#boxGrandTotal').val(grandtotal);
    });