如何使用JQuery创建子表单？实现点击添加子任务按钮生成子表单

完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button class="buttonClass">Add Task</button>

var count = 0;

// 添加主任务表单
$('.buttonClass').click(function() {
  count += 1;
  // 创建完整的主任务表单结构，将元素嵌套在form内部
  const mainForm = $(`
    <form class="main-task-form" name="myform-${count}">
      <input placeholder="this is a main task"/>
      <input type="button" class="subtask-btn" value="Add subtask"/>
      <br>
    </form>
  `);
  mainForm.appendTo('body');
});

// 监听添加子任务按钮点击（事件委托处理动态元素）
$(document).on('click', '.subtask-btn', function() {
  // 找到当前按钮对应的父表单
  const parentForm = $(this).closest('.main-task-form');
  // 创建子任务表单
  const subtaskForm = $(`
    <form class="subtask-form">
      <input placeholder="this is a subtask"/>
      <br>
    </form>
  `);
  // 在父表单前方插入子任务表单
  subtaskForm.insertBefore(parentForm);
});

关键改动说明 #

• 修正表单嵌套结构：原代码将form、input、按钮分别追加到body，导致表单元素不在form内部。现在直接创建完整的form结构，把input和按钮嵌套在form里，保证DOM结构逻辑正确。
• 添加类标识：给主表单加main-task-form类，给子任务按钮加subtask-btn类，方便后续精准选择和关联对应元素。
• 事件委托处理动态元素：动态生成的按钮无法直接用click()绑定事件，改用$(document).on('click', '.subtask-btn', ...)实现事件委托，确保新生成的按钮也能触发点击逻辑。
• 关联父表单并插入子表单：用closest('.main-task-form')定位当前按钮对应的父表单，再通过insertBefore()将子任务表单插入到父表单的前方位置。

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