jQuery中能否结合.each()与.on()？动态更新文本框内容问题

嘿，作为JS/jQuery新手遇到这种问题很正常，我来帮你理顺思路并给出可行方案！

首先得纠正你代码里的小错误：$(document).each.on(...)这种写法是不对的——.each()是用来遍历元素集合的方法，不能直接跟在$(document)后面链式调用.on()。我们不需要用.each()来绑定事件，jQuery的事件委托本身就能一次性给所有匹配的元素（包括模态框里的）绑定事件。

你的核心需求是：每当模态框里任意一个input[type='color']触发change事件时，把所有这类输入框的值都同步更新到#output文本框里。下面是具体实现方案：

方案一：基础事件委托+遍历收集值 #

// 用事件委托绑定到document（兼容动态生成的模态框）
$(document).on("change", "input[type='color']", function() {
  // 初始化数组用来存所有颜色值
  let allColorValues = [];
  
  // 遍历所有颜色输入框，收集每个框的值
  $("input[type='color']").each(function() {
    allColorValues.push($(this).val());
  });
  
  // 把收集到的值按你需要的格式写入#output，这里用逗号分隔
  $("#output").val(allColorValues.join(", "));
});

方案二：更简洁的.map()写法（替代.each()） #

如果想让代码更简洁，可以用.map()来代替.each()收集值，它能直接返回值的数组：

$(document).on("change", "input[type='color']", function() {
  // 用.map()快速收集所有颜色值
  let allColorValues = $("input[type='color']").map(function() {
    return $(this).val();
  }).get(); // 把jQuery对象转换成普通数组
  
  // 这里换成竖线分隔的格式示例，你可以改成任何你需要的格式
  $("#output").val(allColorValues.join(" | "));
});

优化建议：限定范围提升性能 #

如果你的颜色输入框只在模态框里，最好在选择器里加上模态框的范围，避免遍历页面上所有无关的颜色输入框，比如：

// 假设模态框的类是.modal，限定只遍历模态框内的颜色输入框
$(document).on("change", ".modal input[type='color']", function() {
  let allColorValues = $(".modal input[type='color']").map(function() {
    return $(this).val();
  }).get();
  
  $("#output").val(allColorValues.join("\n")); // 用换行分隔每个值
});

为什么原来的代码只能获取一个值？ #

你之前的代码应该是只获取了当前触发事件的那个输入框的值，没有遍历所有输入框重新收集。上面的方案每次触发事件时都会重新遍历所有目标输入框，所以能动态更新所有值的总和。

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