jQuery无法捕获所有输入框值变更问题排查与解决

• 直接绑定事件的局限性：你写的 $(':input').on('input', stateChanged) 是直接给当前页面中已存在的输入框元素绑定事件，对于页面加载完成后动态创建的输入框，或者某些当时DOM还没完全渲染到位的嵌套输入框（比如异步加载的子div内元素），绑定代码执行时这些元素还不存在，自然没法被绑定到事件。
• 控制台注入的特殊性：当你在开发者控制台手动执行这段代码时，页面上所有元素（包括已动态生成、嵌套的输入框）都已经存在于DOM中了，所以 $(':input') 能匹配到所有目标元素，事件也就都能绑定上。

改用事件委托的方式，把事件绑定到一个静态存在的父容器（比如document，或者更靠近输入框的固定父元素，性能更优），利用事件冒泡机制捕获输入框的input事件。代码修改如下：

// 可替换成页面加载时就存在的父元素，比如 $('#fixed-parent-container')
$(document).on('input', ':input', stateChanged);

原理是：不管输入框是初始就存在，还是后续动态创建的，只要它们触发input事件，事件都会冒泡到委托的父容器，父容器会根据选择器:input判断是否为目标元素，符合条件就执行stateChanged函数。

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