为什么我的模糊事件处理程序没有触发？

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

我已经有了这个jQuery来更新总额,当金额输入到五个“金额”框中的任何一个时:

/* 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").

在Sμßhrånil∂的小提琴中,它只是花花公子。但对我来说,我从来没有看到我添加的警报(“在boxamount模糊处理程序中”)。

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:

起初我以为是因为我没有为五个boxAmount输入文本分配ID - 我忘记了这一点。但即使在添加ID后,如下所示:

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".

现在事实上,大多数“boxAmount”都是动态创建的,在某种意义上 - 用户可以有条件地看到它们。但是,上面显示的第一个(“boxAmount1”)始终可见,因此应始终“可查找”。但即使退出/模糊出特定的输入文本,我也看不到“在boxamount模糊处理程序中”。

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":

“boxAmount1”确实出现在“查看源代码”中:

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).

事实上,所有其他人也这样做(boxAmount2 ... boxAmount5)。

2 个解决方案

#1

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 :

在id上触发模糊事件尝试使用类finaff-webform-field-input的输入模糊。因为同一个id在同一页面上不能多次:

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);
    });

#2

Select the DOM object by id directly; should be:

直接通过id选择DOM对象;应该:

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

#1