单元格输入整数后如何让formset数据自动刷新并重计算总和？

问题根因 #

你使用的是直接绑定事件的写法，该写法只会给页面初始化完成时已经存在的DOM元素绑定事件，后续用户新增的动态行里的input元素没有被绑定上keyup事件，所以只有初始行修改时会触发求和逻辑。

修复方案 #

改用jQuery的事件委托机制，把事件绑定到不会动态销毁的父级容器上（优先选你动态表格的外层固定容器，比如表格本身，如果不确定也可以临时绑定到document上），事件触发时会自动匹配所有符合选择器的元素，不管是初始存在还是后续新增的。

修复后的代码如下：

$(document).ready(function() {
  // 事件宿主可以替换成你动态表格的选择器，比如$('#你的表格ID')，性能更优
  $(document).on('keyup change', "input[name$='-line_item_total']", function(){
    var total = 0;
    $("input[name$='-line_item_total']").each(function(index, element) {
      var val = parseFloat($(element).val());
      if(!isNaN(val)){
         total += val;
      }
    });
    // 如果需要固定保留两位小数，可改为total.toFixed(2)
    $("#id_total_total").val(total);
  });
});

优化说明 #

• 额外增加了change事件监听，覆盖用户鼠标粘贴、浏览器自动填充、输入后焦点移开等不会触发keyup的场景，逻辑更严谨
• 把事件委托的宿主从document换成你的动态表格元素，可以减少事件冒泡的性能损耗
• 可根据业务需求对输入值做非法字符拦截、小数位数限制等校验，避免非数值内容影响计算结果

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