使用JQuery动态创建输入框：实时乘积求和功能异常修复求助

我来帮你解决这个total累加错误的问题！你现在的代码每次修改输入时，都是把当前行的乘积直接加到原total值上——但如果是修改已经计算过的行，之前的结果早就被计入total了，再次累加就会重复计算，自然会出现比如本该显示10却出14的情况。

问题根源 #

举个具体的错误场景：

1. 第一行输入2和5，乘积是10，total变成10（这步是对的）
2. 后来把2改成1，乘积变成5，这时候你的代码会把5加到原来的10上，得到15，但正确的total应该是5，这就出错了。

解决方案 #

正确的思路是：每次计算完当前行的乘积后，重新遍历所有结果输入框，把它们的数值全部加起来再赋值给total，这样不管是新增行还是修改已有行，总和都是所有行结果的真实相加。

修改后的完整代码 #

<div class="inputs"></div>
<button type="button" id="new">NEW</button><br><br>
Total:<input id="total" type="text" readonly>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$("#new").click(function(){
    var cont = $(".numb").length;
    var index = cont + 1;
    // 移除inline的onkeyup，改用事件委托更优雅
    var add = "<div><input class='numb' id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='result_"+index+"' readonly></div>";
    $(".inputs").append(add);
});

// 用事件委托处理所有动态生成的输入框的keyup事件
$(".inputs").on("keyup", "input[id^='nn_'], input[id^='mm_']", function(){
    var idx = $(this).attr("id").split("_")[1]; // 从id中提取索引
    calculate(idx);
});

function calculate(idx){
    // 处理空值/非数字，默认转为0，避免NaN
    var num1 = Number($("#nn_" + idx).val()) || 0;
    var num2 = Number($("#mm_" + idx).val()) || 0;
    var result = num1 * num2;
    $("#result_" + idx).val(result);
    
    // 重新计算所有结果的总和
    var totalSum = 0;
    $("input[id^='result_']").each(function(){
        totalSum += Number($(this).val()) || 0;
    });
    $("#total").val(totalSum);
}
</script>

关键优化点 #

• 容错处理：把输入值转成数字时，用|| 0处理空值或非数字内容，避免出现NaN破坏计算结果
• 重新计算总和：不再直接累加当前结果到total，而是遍历所有结果框重新求和，确保结果准确
• 事件委托：不用在动态创建元素时绑定onkeyup，通过父元素监听子元素事件，代码更简洁且支持后续新增的所有输入框

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