jQuery如何应对数量动态增长的选择器？新增select元素事件绑定失效解决方案

为什么原写法对新增字段不生效 #

• 首先原代码存在一个小语法错误：事件回调的写法里function({缺少正确的括号闭合，正确格式应为function() {，这类语法问题也会导致整个绑定逻辑无法正常运行。
• 更核心的原因：你当前用的$("select[id^='bread']").change(...) 属于元素直连绑定模式。这类绑定代码执行时，只会给当时页面DOM树里已经存在的、匹配选择规则的元素挂上事件回调。后续动态创建的同规则select元素，在绑定逻辑执行时还不存在，自然不会被绑定事件，触发change时也就不会执行对应逻辑。

推荐实现方式：jQuery事件委托 #

不需要给每个新增字段单独绑事件，直接利用事件冒泡特性，把事件绑定到页面上固定存在的父级容器（比如表单根节点、甚至document节点），让父级帮所有符合规则的子元素代理事件回调，动态新增的元素同样可以被正常触发：

// 将 固定存在的父容器选择器 替换为实际的固定节点，比如#sandwich-builder-form
$(固定存在的父容器选择器).on("change", "select[id^='bread']", function() {
    // 原有业务逻辑
    // 回调内的this，会自动指向实际触发change事件的那个select元素
})

这种方式的匹配校验是在事件冒泡到父节点时实时执行的，不管子元素是页面初始化时就存在，还是后续用户点击按钮动态新增的，只要符合select[id^='bread']的规则，都会命中绑定逻辑，全程不需要在新增字段的代码里单独加事件绑定操作。

关于存储DOM数组的尝试 #

你把新增select存入数组的方案本身可行，但不需要纠结jQuery选择器能不能读取数组——直接把数组传给jQuery构造函数就能批量生成绑定对象：

// 假设你存储所有bread select的数组名为allBreadSelectEls
$(allBreadSelectEls).change(function() {
    // 业务逻辑
})

但这个方案维护成本很高：每次新增字段都要手动把新元素加入数组，还要重新执行绑定逻辑，很容易出现漏绑定、重复绑定的问题，远不如事件委托方案简洁可靠。

小提示：使用id^='bread'匹配规则时，要注意排除同规则但非目标的元素（比如页面里id为breadcrumbs的导航元素），可以根据实际DOM结构把选择规则写得更精准，避免误触发。

内容的提问来源于stack exchange，提问作者M. Roshid