jQuery动态生成input输入框仅最后一个可触发keyup获取值问题求解

问题根因 #

• 全局变量fieldValue会在每次新增输入框时被覆盖，页面加载时执行的事件委托逻辑仅会读取一次fieldValue的值，最终仅能匹配到最后生成的输入框ID
• 取值逻辑$(fieldValue).val()直接读取已被覆盖的全局变量，永远只能拿到最后一个输入框的内容
• 原有循环存在边界错误，i<=dataStored.length会导致数组下标越界，触发报错

修复后代码 #

JS部分 #

var a = 0;
var dataStored = [];
var valueStored = [];

$("#addInput").on("click", function() {
  a += 1;
  // 改为局部变量，避免污染全局作用域
  const fieldValue = `#filter-value${a}`;
  $("#inputAdder").append(
    `<div class = "row" id="appender${a}">
      <div class="col-md-4 padderSpace">
        <!-- 新增公共类名，用于事件委托匹配 -->
        <input class="dynamic-input" id="filter-value${a}">
      </div>
    </div>`
  )
  dataStored.push({value:fieldValue});
  console.log(dataStored);
})

// 用公共类名做事件委托，所有动态生成的输入框都可触发事件
$("#inputAdder").on("keyup", ".dynamic-input", changeFunc);

function changeFunc(e){
  // 通过事件对象直接获取当前触发事件的输入框，无需依赖ID查找
  const currentInputVal = $(e.target).val();
  console.log('当前操作输入框的值：', currentInputVal); 

  valueStored = [];
  // 修正循环边界，避免数组越界
  for(let i = 0; i < dataStored.length; i++){
    valueStored.push({value:$(dataStored[i].value).val()});
  }
  console.log('所有输入框值集合：', valueStored);
}

核心改动说明 #

• 给动态生成的input添加公共类名dynamic-input，事件委托直接匹配该类，无需跟随ID变化调整，新增任意数量输入框都能正常触发事件
• 取消全局fieldValue变量，新增输入框时的ID选择器改为局部变量，避免全局变量被反复覆盖的问题
• 取值逻辑改为通过事件对象的target属性直接获取当前触发事件的输入框，保证每次拿到的都是当前操作输入框的内容
• 修正循环边界条件，把i<=dataStored.length改为i < dataStored.length，避免数组下标越界报错

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