使用show函数复制DOM展示表单后点击Next无法正常步进问题

• 事件绑定失效：页面加载完成后执行的$(document).ready逻辑里，是直接给当时页面上已存在的.next、.previous按钮绑定了点击事件。你后续通过innerHTML把隐藏表单的内容复制到#main_place时，新生成的按钮是全新的DOM节点，没有绑定任何点击事件，所以点击没有响应。
• 重复DOM节点冲突：复制操作完成后，页面上会同时存在两套完全相同的表单节点（原隐藏的#operation1里的表单、新复制到#main_place里的表单），加上你的代码里存在大量重复的元素ID，会导致jQuery选择器匹配到错误的节点，就算事件正常触发也无法正确切换fieldset。

方案1：使用事件委托（改动最小） #

把原来的直接绑定事件逻辑改为事件委托，绑定到不会被替换的顶层节点上，后续新增的同类元素也会自动继承事件：

// 替换原来$(document).ready内的绑定逻辑
$(document).ready(function() {
  $(document).on('click', '.next', getNext);
  $(document).on('click', '.previous', getPrev);
});

方案2：直接移动DOM节点而非复制 #

不需要复制内容，直接把原本隐藏的表单节点移动到展示区域，既保留原有事件绑定，也不会产生重复节点：

function show(operationId) {
  const showContainer = document.getElementById('main_place');
  const formContainer = document.getElementById(operationId);
  // 清空展示容器原有内容
  showContainer.innerHTML = '';
  // 把隐藏的表单节点直接移动到展示容器
  showContainer.appendChild(formContainer);
  // 显示表单
  formContainer.style.display = 'block';
}

请修正代码中重复的元素ID（比如element_2_1、contact_phone等ID在多个元素上重复使用），ID全局唯一是HTML规范要求，重复ID会导致选择器、表单提交等逻辑出现不可预期的异常。

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