编辑表单后Switchery开关输入项重复新增问题求助

问题根源 #

你遇到的重复新增Switchery开关项的问题，核心原因是创建表单的DOM结构未在每次进入时重置为初始状态。编辑保存操作后，表单的额外元素被保留/追加到了创建页面的DOM中，而非重新渲染干净的初始表单。Switchery本身不会自动新增输入项，它只是对现有checkbox进行样式增强，问题出在表单的复用/重置逻辑缺失。

解决方案 #

1. 为创建表单维护独立模板并按需重新渲染 #

通过定义独立的创建表单模板，每次进入创建页面时清空容器并重新渲染初始结构，彻底避免DOM污染。

<!-- 定义创建表单的初始模板 -->
<script type="text/template" id="create-form-template">
  <div class="form-group ">
    <span>
      <input type="checkbox" class="switchery" name="eligible_for_adam_intop" />
      <label class="control-label"> Eligible for <b>  <span class="label" style="color:#FFF;background-color: #31B724; font-size:15px;"> Adam Intop</span></b>
      </label>
    </span>

    <span class="pl-5">
      <input type="checkbox" class="switchery" name="status" />
      <label class="control-label"> Activate Action  </label>
    </span>
  </div>
</script>

<!-- 创建表单容器 -->
<div id="create-form-container"></div>

// 渲染创建表单的函数
function renderCreateForm() {
  const template = document.getElementById('create-form-template').innerHTML;
  const container = document.getElementById('create-form-container');
  // 清空容器并插入干净的模板
  container.innerHTML = template;
  // 初始化Switchery
  initSwitchery();
}

// 通用Switchery初始化函数（含实例销毁逻辑）
function initSwitchery() {
  // 先销毁已存在的Switchery实例，避免重复初始化
  document.querySelectorAll('.switchery').forEach(el => {
    if (el.switcheryInstance) {
      el.switcheryInstance.destroy();
    }
  });
  
  // 初始化新的开关组件
  const elems = document.querySelectorAll('.switchery');
  elems.forEach(html => {
    const switchery = new Switchery(html);
    // 将实例绑定到元素上，方便后续销毁
    html.switcheryInstance = switchery;
  });
}

// 页面加载时渲染初始创建表单
document.addEventListener('DOMContentLoaded', renderCreateForm);

// 切换到创建页面时调用（比如点击"新建"按钮）
document.getElementById('open-create-btn')?.addEventListener('click', renderCreateForm);

2. 优化编辑页面的DOM处理逻辑 #

确保编辑保存后，编辑页面的表单元素不会被复用或复制到创建页面中。编辑操作完成后，应销毁编辑表单的Switchery实例并清空其DOM内容，避免残留元素影响其他页面。

// 编辑保存完成后的清理逻辑
function cleanupEditForm() {
  // 销毁编辑表单的Switchery实例
  document.querySelectorAll('.edit-form .switchery').forEach(el => {
    if (el.switcheryInstance) {
      el.switcheryInstance.destroy();
    }
  });
  // 清空编辑表单容器
  document.getElementById('edit-form-container').innerHTML = '';
}

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