JavaScript中多ID绑定keyup事件失败 求错误排查及优化方案

首先得点明你代码里的核心错误：你用||来组合多个jQuery选择器的方式完全不对！在JavaScript里，'#Rate1' || '#Rate2'这种逻辑或运算会直接返回第一个“真值”（也就是'#Rate1'），所以你的代码实际上只给#Rate1绑定了事件，剩下的#Rate2、#Rate3、#Rate4根本没被选中，自然不会触发事件。

正确的多元素绑定写法 #

要选择多个ID对应的元素，jQuery里需要用逗号分隔多个选择器，这才是正确的多元素选择语法：

$('#Rate1, #Rate2, #Rate3, #Rate4').keyup(function(){
    // 给每个parseFloat加了||0，避免空值返回NaN导致结果异常
    var textone = parseFloat($('#Amt1').val()) || 0;
    var texttwo = parseFloat($('#Amt2').val()) || 0;
    var textthree = parseFloat($('#Amt3').val()) || 0;
    var textfour = parseFloat($('#Amt4').val()) || 0;
    var result = textone + texttwo + textthree + textfour;
    $('#TotalInvoiceValue').val(result.toFixed(2));
});

额外提一句：我给每个parseFloat后面加了|| 0，这是因为如果输入框为空，parseFloat会返回NaN，直接相加的话最终结果也会变成NaN，加个||0就能把空值或者非数字值转换成0，保证计算正常。

替代keyup的更佳事件方案 #

keyup其实不是最适合输入实时计算的事件，推荐两个更好的选择：

• input事件：它能响应所有输入场景——键盘输入、鼠标粘贴、拖拽输入甚至语音输入，覆盖范围比keyup广得多，用户体验更流畅。
• change事件：适合不需要实时计算的场景，只有当用户离开输入框（失去焦点）时才触发，能减少不必要的重复计算。

用input事件的示例代码 #

$('#Rate1, #Rate2, #Rate3, #Rate4').on('input', function(){
    var textone = parseFloat($('#Amt1').val()) || 0;
    var texttwo = parseFloat($('#Amt2').val()) || 0;
    var textthree = parseFloat($('#Amt3').val()) || 0;
    var textfour = parseFloat($('#Amt4').val()) || 0;
    var result = textone + texttwo + textthree + textfour;
    $('#TotalInvoiceValue').val(result.toFixed(2));
});

更简洁的类选择器优化方案 #

如果你的这些输入框有规律，建议给所有Rate输入框加一个统一的类（比如rate-input），Amt输入框加amt-input类，这样代码可以大幅简化，而且后续新增输入框也不用修改选择器：

$('.rate-input').on('input', function(){
    var total = 0;
    // 遍历所有Amt输入框累加值
    $('.amt-input').each(function(){
        total += parseFloat($(this).val()) || 0;
    });
    $('#TotalInvoiceValue').val(total.toFixed(2));
});

内容的提问来源于stack exchange，提问作者Cody Coderson