CodeIgniter表单动态新增行后列数据求和功能异常问题咨询

数据老陈

2026-9-24

异常原因

核心问题是动态生成元素的事件绑定失效：

当前求和逻辑采用直接绑定写法$('[id^=nonclinsub]').on('keyup',function(){...})，该绑定仅会在页面初次加载完成时，给当时已存在的DOM元素挂载keyup触发事件。
后续通过「添加更多」按钮新增的输入框是页面加载完成后动态插入的元素，没有被绑定求和触发事件，因此在新增行输入时不会触发求和逻辑。
你遇到的三种现象完全符合该逻辑：
1. 第一行是页面初始渲染的元素，已绑定事件，输入时正常触发求和
2. 新增行未绑定事件，输入时无反应，总计不会更新
3. 在原始第一行输入时触发了绑定的事件，事件逻辑会遍历所有符合id规则的输入框（包含新增行），因此能得到正确总和

修复方案

将直接事件绑定改为事件委托写法，把事件绑定在页面加载时就存在、不会被动态移除的父级元素上（此处用document即可），后续所有新增的符合规则的元素都会自动触发绑定的事件逻辑。

修改后的求和脚本如下：

$(document).ready(function(){ 
    // 总测试数求和逻辑，用事件委托绑定
    $(document).on('keyup', '[id^=nonclinsub]', function() {
        var total = 0;
        $('[id^=nonclinsub]').each(function(){
            total += parseFloat($(this).val() || 0);
        });
        $('#amt_nonclinsub_1').val(total.toFixed(0));
    });

    // 确诊数求和逻辑，用事件委托绑定
    $(document).on('keyup', '[id^=subdx]', function() {
        var total = 0;
        $('[id^=subdx]').each(function(){
            total += parseFloat($(this).val() || 0);
        });
        $('#amt_subdx_2').val(total.toFixed(0));
    });
});