jQuery如何获取动态DOM生成的输入框值并校验总和为100

现有表单如下：
表单示意图
核心需求：拦截表单提交逻辑，只有所有数字输入框的取值总和等于100时才允许提交保存，否则直接阻止提交。
页面中的权重输入框并非静态写死，是通过AJAX请求完成后动态插入DOM的，动态生成相关代码如下：

url: '/getProjectStandards/' + standid,
type: "get",
async: true,
dataType: "json",
success: function (data2) {
    console.log(data2);
    $.each(data2, function (key, value) {
        $('#inner_sugg').append('<div class="row mt-1">' +
            '<div class="col-6">' +
            '<p class="">' + value['stand_name'] + '</p>' +
            '</div>' +
            '<div class="col-6">' +
            '<input type="hidden" class="form-control col-3" name="stand_id[]" value="' + value['id'] + '">' +
            '<input type="number" min="0" class="form-control col-3 sugg_weight" name="sugg_weight[]" required">' +
            '</div>' +
            '</div>'
        );
    });
}

可直接复用的实现代码 #

不用特意在AJAX回调里给输入框单独绑事件，直接给表单绑定提交监听即可：提交事件触发的瞬间才去DOM里查找所有目标输入框，不管是页面初始写死的还是后续AJAX动态插入的，只要渲染完成存在于页面上就能被正常选中，完全适配动态生成场景。

// 把#weightForm替换成你项目里实际的表单选择器
$('#weightForm').submit(function(e) {
    let totalWeight = 0;
    // 遍历所有带sugg_weight类的权重输入框
    $('.sugg_weight').each(function() {
        // 输入值转浮点数，空值、非法值统一按0计算
        const currentVal = parseFloat($(this).val()) || 0;
        totalWeight += currentVal;
    });

    // 处理JS浮点数精度问题，避免0.1+0.2=0.30000000000000004这类计算误差
    totalWeight = Math.round(totalWeight * 100) / 100;
    if (totalWeight !== 100) {
        // 拦截默认提交行为
        e.preventDefault();
        // 提示可以替换成项目里用的Toast、弹窗组件，不用硬写alert
        alert(`权重总和必须等于100，当前总和为${totalWeight}，请调整后再提交`);
        return false;
    }
    // 校验通过，正常执行提交逻辑
});

落地注意事项 #

• 不需要为动态输入框用事件委托绑定事件，提交节点统一求和的写法逻辑最简洁、稳定性最高。如果需要输入时实时提示总和，也可以额外给document绑sugg_weight输入框的input事件做实时计算，不影响提交校验逻辑。
• 浮点数精度处理必须保留，否则用户输入多个小数权重时很容易出现计算偏差，明明总和是100也被拦截，体验很差。
• 输入框自带的required和min=0属性会先走原生表单校验，自动拦截空值、负数输入，求和逻辑里也做了值兜底，不会出现总和为NaN的异常情况。

内容的提问来源于stack exchange，提问作者Div.A