如何在jQuery的同一输入字段上多次使用onkeyup事件？

我把你开发的带计算功能的表单代码整理成了更清晰的结构，还补充了实时触发的逻辑和关键细节说明，方便你直接使用和扩展：

需求说明 #

• 针对表单中的多行重复数据（通过ID后缀区分每行），根据输入的工作天数、费率、支付百分比、已支付金额等字段，自动完成计算并展示结果

HTML 示例结构 #

<!-- 支持多行重复的表单行，用data-id标记每行唯一ID -->
<div class="form-row" data-id="1">
  <input type="number" id="days_work_1" placeholder="工作天数">
  <input type="number" id="rateReceived_1" placeholder="日/小时费率">
  <input type="number" id="perc_paid_1" placeholder="支付百分比（%）">
  <input type="number" id="paidFrmUk_1" placeholder="UK已支付金额">
  <input type="number" id="paid_from_india_1" placeholder="印度已支付金额">
  <!-- 只读输入框展示计算结果 -->
  <input type="number" id="calculated_total_1" readonly placeholder="剩余待支付">
</div>

<div class="form-row" data-id="2">
  <input type="number" id="days_work_2" placeholder="工作天数">
  <input type="number" id="rateReceived_2" placeholder="日/小时费率">
  <input type="number" id="perc_paid_2" placeholder="支付百分比（%）">
  <input type="number" id="paidFrmUk_2" placeholder="UK已支付金额">
  <input type="number" id="paid_from_india_2" placeholder="印度已支付金额">
  <input type="number" id="calculated_total_2" readonly placeholder="剩余待支付">
</div>

jQuery 计算功能实现 #

// 核心计算函数：根据行ID获取字段值并完成计算
function sum(param, id) {
    // 获取对应行的字段值，转为数字（空值或非数字默认设为0，避免NaN错误）
    var daysWork = parseFloat(document.getElementById('days_work_' + id).value) || 0;
    var rateReceived = parseFloat(document.getElementById('rateReceived_' + id).value) || 0;
    var percPaid = parseFloat(document.getElementById('perc_paid_' + id).value) || 0;
    var paidFrmUk = parseFloat(document.getElementById('paidFrmUk_' + id).value) || 0;
    var paidFrmIndia = parseFloat(document.getElementById('paid_from_india_' + id).value) || 0;

    // 这里可以根据你的实际业务需求修改计算逻辑
    // 示例逻辑：总应得 = 工作天数 × 费率 × 支付百分比（转成小数），减去已支付总额
    var totalEarned = daysWork * rateReceived * (percPaid / 100);
    var totalPaid = paidFrmUk + paidFrmIndia;
    var balance = totalEarned - totalPaid;

    // 将计算结果赋值到对应行的结果框，保留两位小数
    document.getElementById('calculated_total_' + id).value = balance.toFixed(2);
}

// 页面加载完成后，绑定实时计算事件
$(document).ready(function() {
    // 监听所有数字输入框的输入/变化事件，自动触发计算
    $('.form-row input[type="number"]').on('input change', function() {
        // 获取当前输入框所在行的ID
        var rowId = $(this).closest('.form-row').data('id');
        // 调用计算函数
        sum(null, rowId);
    });
});

关键细节说明 #

• 避免NaN错误：用parseFloat()转换输入值，搭配|| 0处理空值或非数字输入，确保计算不会出错
• 实时响应：通过input和change事件监听用户输入，只要字段值变化就自动更新计算结果
• 行ID管理：用data-id属性标记每行，避免硬编码ID后缀，后续新增行时只需修改data-id即可
• 结果格式化：用toFixed(2)保留两位小数，符合金额类计算的展示规范

内容的提问来源于stack exchange，提问作者amit sutar