如何获取动态创建的文本框（textbox）的值？

我懂你现在的需求——通过jQuery动态生成了带文本框的表单组，想要拿到这些动态创建的textbox的值对吧？下面给你几种实用的实现方案：

方案一：针对单个动态文本框，通过事件委托实时取值 #

如果想在用户操作（比如输入内容、失去焦点）时获取某一个动态文本框的值，可以用事件委托绑定对应事件：

// 先给所有动态文本框加一个统一的类名，比如dyn-input
$(document).on('input', '.dyn-input', function() {
  // 这里的this就是当前触发事件的动态文本框元素
  const currentValue = $(this).val().trim();
  console.log('当前文本框的值：', currentValue);
  // 这里可以直接把值用于后续逻辑，比如实时校验、预览等
});

方案二：批量收集所有动态文本框的值 #

如果需要一次性获取所有动态生成的文本框内容，可以通过类选择器遍历所有元素：

// 定义一个函数专门收集值
function collectAllDynamicInputs() {
  const inputValues = [];
  // 用统一类名选中所有动态文本框
  $('.dyn-input').each(function(index, element) {
    inputValues.push({
      id: index + 1,
      value: $(element).val().trim()
    });
  });
  console.log('所有动态文本框的值集合：', inputValues);
  return inputValues;
}

// 调用示例：比如点击提交按钮时收集
$(document).on('click', '#submit-btn', function() {
  const allValues = collectAllDynamicInputs();
  // 这里可以把allValues发给后端，或者做其他业务处理
});

关键补充：给动态文本框加统一标识 #

在你生成动态表单的代码里，记得给文本框加上统一的类名，这样才能方便选中它们。比如修改你生成inner_div的代码：

inner_div = `<div class='col-sm-12 form-group'>
  <label class='col-sm-2 control-label'>参数 ${id_cnt}</label>
  <div class='col-sm-8'>
    <input type='text' class='form-control dyn-input' name='param_${id_cnt}' placeholder='请输入参数值'>
  </div>
  <div class='col-sm-2'>
    <button type='button' class='btn btn-danger btn-sm remove'>
      <span class='glyphicon glyphicon-minus'></span>
    </button>
  </div>
</div>`;

注意事项 #

• 绑定动态元素的事件必须用事件委托（$(document).on()），因为动态生成的元素在页面初始加载时不存在，直接用$('.dyn-input').on()是绑定不上事件的。
• 如果需要区分不同的文本框，可以用你的id_cnt拼接出唯一的name属性，这样在批量处理时也能对应到具体的参数项。

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