如何使用jQuery获取动态创建div中输入框的有序输入值？

核心问题 #

你遇到的问题根源是所有动态创建的输入框都使用了相同的ID salesPersonName——在HTML中ID必须是唯一的，当用$("#salesPersonName")选择元素时，只会返回DOM中第一个匹配该ID的元素，所以永远只能拿到第一个输入框的值。

解决步骤 #

1. 替换重复ID为Class
   把动态创建的输入框的id属性改成class，用class来标识这类输入框，比如sales-person-name。

   修改后的动态添加代码：

   $("#row-list-outer").append(`<div class="row g-3">
                        <div>                                  
                          <input type="text" class="sales-person-name" placeholder="Name">
                         </div>
                     </div>`);
   

2. 按顺序收集输入值
   通过class选择器选中所有输入框，利用each()方法按DOM中的顺序（也就是你创建的顺序）遍历它们，把值存入数组。

   示例获取逻辑：

   // 假设点击某个按钮触发获取操作
   $("#get-names-btn").click(function() {
     const nameArray = [];
     $(".sales-person-name").each(function(index, element) {
       // 按创建顺序存入数组，index对应数组索引
       nameArray[index] = $(element).val().trim();
     });
     console.log(nameArray); // 输出顺序对应的数组
   });
   

额外提示 #

如果需要实时维护数组（比如输入框内容变化时同步更新数组），可以给输入框绑定input事件：

// 事件委托，监听动态创建的输入框
$("#row-list-outer").on("input", ".sales-person-name", function() {
  const nameArray = [];
  $(".sales-person-name").each(function(i, el) {
    nameArray[i] = $(el).val().trim();
  });
  // 这里可以把nameArray用于后续逻辑
});

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