如何在jQuery中获取动态生成输入框的文本值并推入数组？

现有代码的核心问题 #

• 重复使用相同ID tier_name：HTML中ID必须全局唯一，动态生成多个同ID元素时，$('#tier_name')只会匹配到第一个生成的元素
• 取值时机错误：你在刚把输入框插入DOM的瞬间就读取值，此时用户还没有输入任何内容，读到的自然是空字符串
• 未清空旧数组：如果用户多次修改输入的数量，旧的temp值会累积，导致数据混乱

修复方案 #

1. 动态生成输入框时放弃固定ID，改用class标识同类型输入框
2. 调整取值逻辑，不在生成输入框时立刻取值，改为用户输入完成/提交时遍历所有输入框统一采集
3. 每次重新生成输入框时先清空temp数组，避免旧数据残留

修复后代码示例：

let temp = [];
$(document).ready(function() {
  // 动态生成输入框逻辑
  $("#staff_tier").change(function() {
    let m = parseInt($(this).val()) || 0;
    $('#tier').html('');
    // 生成新输入框前清空旧数组
    temp = [];
    let tier_num = 1;
    for (var i = 0; i < m; i++) {
      $('#tier').append(`<label><b><span style="color:#e60000;">*</span><i> Tier (${tier_num++})</i></b></label><br>
        <div class="input-group-prepend">
          <input class="form-control tier-name-input" type="text" placeholder="" required>
        </div>
      `);
    }
  });

  // 可按需选择取值触发方式，以下提供两种常见方案
  // 方案1：点击提交按钮时采集所有输入值
  $('#submitBtn').click(function() {
    temp = [];
    $('.tier-name-input').each(function() {
      let inputVal = $(this).val().trim();
      if (inputVal) temp.push(inputVal);
    });
    console.log(temp);
    // 后续提交逻辑
  });

  // 方案2：输入时实时同步数组值
  $(document).on('input', '.tier-name-input', function() {
    temp = [];
    $('.tier-name-input').each(function() {
      temp.push($(this).val().trim());
    });
    console.log(temp);
  });
});

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