如何用jQuery在双输入框填满时重复生成同一Div（分步实现）

先帮你梳理下现有代码里的几个小问题，这也是功能没生效的原因：

1. 重复声明了var input1 = $("#med").val();两次，应该是分别获取两个输入框的值
2. 选择器$("medicine_fields")漏了#，正确的应该是$("#medicine_fields")（如果这是你要显示的元素ID）
3. 现有逻辑只是显示元素，并没有实现生成新的div输入组的核心需求
4. 没有处理动态生成元素的事件绑定，新生成的输入框不会触发原来的blur事件

下面是完整的分步实现方案，你可以跟着一步步来：

第一步：搭建基础HTML结构 #

我们需要一个容器来存放所有输入组，一个隐藏的模板用来克隆新组，再加上初始的输入组和可选的停止按钮：

<!-- 存放所有输入组的容器 -->
<div id="medicine-container">
  <!-- 初始显示的第一个输入组 -->
  <div class="medicine-group">
    <input type="text" class="med" placeholder="请输入药品名称">
    <input type="text" class="pon" placeholder="请输入剂量">
  </div>
</div>

<!-- 隐藏的模板，用来克隆新的输入组 -->
<div id="medicine-template" style="display: none;">
  <div class="medicine-group">
    <input type="text" class="med" placeholder="请输入药品名称">
    <input type="text" class="pon" placeholder="请输入剂量">
  </div>
</div>

<!-- 可选：让用户手动停止添加的按钮 -->
<button id="stop-adding">停止添加新组</button>

第二步：编写jQuery逻辑实现核心功能 #

这里用到事件委托来处理动态生成的输入框，同时加入控制开关来满足“持续到条件不成立”的需求：

$(document).ready(function() {
  // 控制是否允许添加新组的开关，默认开启
  let allowAddNewGroup = true;

  // 监听停止按钮的点击事件，关闭添加开关
  $("#stop-adding").click(function() {
    allowAddNewGroup = false;
    $(this).text("已停止添加");
    $(this).prop("disabled", true);
  });

  // 事件委托：监听所有输入框的输入事件（包括动态生成的）
  $("#medicine-container").on("input", ".med, .pon", function() {
    // 如果已经停止添加，直接退出
    if (!allowAddNewGroup) return;

    // 获取当前输入框所在的那一组
    const currentGroup = $(this).closest(".medicine-group");
    // 拿到当前组两个输入框的值（去除首尾空格）
    const medValue = currentGroup.find(".med").val().trim();
    const ponValue = currentGroup.find(".pon").val().trim();

    // 检查当前组的两个输入是否都填了，并且最后一个组是空白的（避免重复生成）
    const lastGroup = $("#medicine-container .medicine-group").last();
    const lastGroupIsEmpty = lastGroup.find(".med").val().trim() === "" && lastGroup.find(".pon").val().trim() === "";

    if (medValue !== "" && ponValue !== "" && lastGroupIsEmpty) {
      // 克隆模板里的输入组
      const newGroup = $("#medicine-template .medicine-group").clone();
      // 把新组添加到容器末尾
      $("#medicine-container").append(newGroup);
    }
  });
});

第三步：功能说明与优化点 #

• 事件委托的作用：因为动态生成的元素不会自动绑定原来的事件，所以我们把事件绑定到父容器#medicine-container上，这样所有子元素（包括后来生成的）都能触发事件
• 实时检查：用input事件代替blur，用户输入过程中就能触发检查，体验更流畅
• 避免重复生成：判断最后一个组是否是空白的，防止用户在同一组多次输入时重复生成新组
• 停止机制：通过开关变量allowAddNewGroup实现“条件不成立时停止”，你也可以根据自己的需求修改停止条件（比如某个输入框不符合格式时停止）

如果你需要删除组的功能，还可以给每个输入组加个删除按钮，然后用事件委托处理删除逻辑，比如：
在模板里添加删除按钮：

<div id="medicine-template" style="display: none;">
  <div class="medicine-group">
    <input type="text" class="med" placeholder="请输入药品名称">
    <input type="text" class="pon" placeholder="请输入剂量">
    <button class="delete-group">删除</button>
  </div>
</div>

然后在jQuery里添加删除逻辑：

$("#medicine-container").on("click", ".delete-group", function() {
  // 确保至少保留一个输入组
  if ($("#medicine-container .medicine-group").length > 1) {
    $(this).closest(".medicine-group").remove();
  }
});

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