如何使用jQuery将输入值传入动态生成的字段？

我看了你的代码片段，发现几个关键问题导致功能无法正常运行，下面是修正后的完整方案，帮你实现需求：

原代码的主要问题 #

• 选择器错误：你写的 $("add-more") 没有指定选择器类型（id或类），jQuery无法识别这个按钮，应该是 $("#add-more")（如果按钮用id属性）或 $(".add-more")（如果用类属性）。
• 动态元素赋值逻辑错误：你直接尝试给 $('#admore').val(mat) 赋值，但#admore是动态生成的元素，在点击按钮时它还不存在，所以赋值不会生效。必须先创建元素，再针对新生成的元素赋值。
• 模板引用不完整：代码里的 $("cop... 应该是想引用一个模板元素，但选择器不完整，导致无法正确复制结构。

完整实现方案 #

第一步：HTML结构（先搭好基础框架） #

<!-- 主输入区域 -->
<div class="main-input-group">
  <input type="text" id="mat" placeholder="请输入物料名称">
  <input type="number" id="qty" placeholder="请输入数量">
  <button id="add-more">添加新字段</button>
</div>

<!-- 存放动态生成字段的容器 -->
<div id="dynamic-fields-wrap"></div>

<!-- 隐藏的模板（用来克隆生成新字段，避免手动拼接HTML） -->
<div id="field-template" style="display: none;">
  <div class="dynamic-field-item">
    <input type="text" class="admore" readonly> <!-- 可选readonly，防止用户修改 -->
    <input type="number" class="adqty" readonly>
    <button class="remove-btn">删除</button>
  </div>
</div>

第二步：修正后的jQuery代码 #

$(document).ready(function () {
  // 点击「添加新字段」按钮的事件
  $("#add-more").click(function () {
    // 获取主输入框的内容，trim()去掉前后空格
    var materialName = $('#mat').val().trim();
    var materialQty = $('#qty').val().trim();

    // 可选：先验证输入是否为空，提升用户体验
    if (!materialName || !materialQty) {
      alert("请先填写完整的物料名称和数量哦！");
      return; // 不执行后续代码
    }

    // 克隆隐藏的模板元素
    var newField = $("#field-template").clone();
    // 移除模板的id，避免页面出现重复id
    newField.removeAttr("id");
    // 显示新生成的字段（模板默认是隐藏的）
    newField.show();

    // 给新生成的输入框赋值
    newField.find(".admore").val(materialName);
    newField.find(".adqty").val(materialQty);

    // 将新字段添加到容器中
    $("#dynamic-fields-wrap").append(newField);

    // 可选：清空主输入框，方便继续添加新条目
    $('#mat').val('');
    $('#qty').val('');
  });

  // 动态生成的「删除」按钮事件（用事件委托，确保新生成的按钮能触发）
  $(document).on("click", ".remove-btn", function () {
    // 找到当前按钮所在的字段容器，然后删除
    $(this).closest(".dynamic-field-item").remove();
  });
});

关键细节说明 #

1. 模板克隆：用隐藏的模板来克隆新字段，比手动拼接HTML更可靠，避免引号转义、结构错误等问题。
2. 动态元素操作：通过 newField.find(".admore") 定位到当前新生成的输入框再赋值，确保每个新字段都能拿到正确的值。
3. 事件委托：删除按钮是动态生成的，直接绑定click事件无效，必须用$(document).on("click", ".remove-btn", ...)的方式委托事件，让后续生成的按钮也能触发删除逻辑。
4. 输入验证：添加简单的非空判断，避免生成空的字段。

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