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

Question

我有这个 jQuery 可以在五个 "amount" 框中的任何一个中输入金额时更新总数：

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

在 Sµßhrånil∂ 的 fiddle here 中，它工作得很好。但对我来说，我从来没有看到我添加的警报 ("in the boxamount blur handler")。

起初我以为是因为我没有为五个boxAmount输入文本分配ID - 我确实忘记了。但即使在添加 ID 之后，也是如此：

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

...未到达处理程序。

现在，大多数 "boxAmount" 都是动态创建的，从某种意义上说，它们是由用户有条件地显示的。但是，上面显示的第一个 ("boxAmount1") 始终可见，因此应该始终是 "findable." 但即使在 exiting/blurring 上，我也看不到 "in the boxamount blur handler".

为什么不呢？如何在此处理程序下点火以使其响应 exit/blur 事件？

"boxAmount1" 确实出现在 "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;" />

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

Answer 1

在 id 上触发 blur 事件尝试使用 输入 blur 和 class finaff-webform-field-input。因为相同的 id 不能在同一页面上出现多次 :

这是 class 模糊事件

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

Answer 2

Select直接通过id获取DOM对象；应该是：

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

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

Why is my blur event handler not firing?

jquery

blur