动态生成HTML元素的keyup事件绑定问题及求和需求

嗨，我来帮你搞定这个问题～你遇到的核心问题其实是事件绑定的时机不对：当你直接给第一个输入框绑定keyup事件时，那些动态生成的mon1、mon2这类输入框还没被创建出来，所以事件自然没法作用在它们身上。而你在控制台执行代码时能生效，是因为那时候动态元素已经存在了，直接绑定当然没问题。

要解决这个问题，你需要用事件委托的方式——把事件绑定到这些输入框的共同父元素（甚至是document）上，利用事件冒泡的特性，来监听动态生成元素的事件。同时结合你能获取到的mon开头的ID，我们可以精准匹配目标输入框。

具体实现步骤 #

1. 用事件委托绑定keyup事件：选择一个稳定存在的父容器（比如所有输入框所在的div，或者直接用document），监听keyup事件，只对ID以mon开头的输入框生效。
2. 计算所有输入框的总和：每次触发keyup时，遍历所有符合条件的输入框，把它们的数值累加，最后更新到总计区域。

完整代码示例 #

// 事件委托绑定keyup，监听所有ID以mon开头的输入框
$(document).on('keyup', 'input[id^="mon"]', function() {
    let total = 0;
    // 遍历所有目标输入框，计算总和
    $('input[id^="mon"]').each(function() {
        // 将输入值转为数字，空值或非数字默认按0处理
        const num = parseFloat($(this).val()) || 0;
        total += num;
    });
    // 将总计结果更新到页面的总计区域（假设你的总计元素ID是totalSum）
    $('#totalSum').text(total.toFixed(2)); // 保留两位小数更符合数值展示习惯
});

为什么这样有效？ #

事件委托的核心是父元素监听子元素的事件冒泡，不管子元素是页面加载时就存在，还是后来动态生成的，只要它匹配我们指定的选择器（input[id^="mon"]），触发keyup事件时就会被父元素捕捉到，从而执行我们的逻辑。这样就完美解决了动态元素无法绑定事件的问题。

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