jQuery克隆表单后按钮active类切换功能失效问题求解

按钮失效、选中态错乱本质是三个逻辑漏洞：

• 事件只绑定给了页面初始加载时就存在的第一个表单按钮，后续动态克隆生成的新按钮没有绑定点击事件，自然点击无响应
• 切换选中态时直接全局查找对应类名的按钮，没有把操作范围限定在当前按钮所属的表单内，导致点一个表单的按钮，所有表单里同位置的按钮都会被改状态
• 克隆、删除逻辑硬编码了固定IDwrapper_2，只能新增、删除一个克隆项，无法支持多次克隆操作

核心改三个点，不需要大改现有HTML的类名结构，调整JS逻辑即可：

1. 改用事件委托绑定按钮点击、删除事件：把事件绑定到页面加载时就存在、不会被动态删除的父容器上，所有后续动态新增的子元素触发事件时都能被响应，不需要每次克隆完重新绑事件
2. 切换选中态时限定操作范围：点击按钮后先定位到按钮所在的单个表单容器，只在这个容器内查找同组按钮增删is_active类，彻底避免跨表单状态错乱
3. 改造增删逻辑：用自增计数器动态生成克隆项的唯一ID，删除时直接定位点击的删除按钮所属的表单项，支持任意次增删操作

调整后的JS代码 #

可以直接替换你原来的JS逻辑：

// 克隆项计数器，初始值为2，第一个原始表单项ID为wrapper_1
let cloneIndex = 2;

// 1. 绑定按钮组选中切换逻辑：事件委托到静态父容器#main-wrapper
$('#main-wrapper').on('click', '.func_btns', function () {
  // 定位当前按钮所属的单个表单容器，所有操作限定在这个容器内
  const $currentFormItem = $(this).closest('.parentClass');

  // 处理第一组按钮：Private/Work
  if ($(this).is('.btn_first_4, .btn_second_4')) {
    $currentFormItem.find('.btn_first_4, .btn_second_4').removeClass('is_active');
    $(this).addClass('is_active');
  }

  // 处理第二组按钮：电话类型
  if ($(this).is('.btn_5, .btn_6, .btn_7, .btn_8')) {
    $currentFormItem.find('.btn_5, .btn_6, .btn_7, .btn_8').removeClass('is_active');
    $(this).addClass('is_active');
  }
})

// 2. 克隆逻辑
function duplicate() {
  const template = document.getElementById('wrapper_1');
  const clone = template.cloneNode(true);
  // 动态设置唯一ID
  clone.id = `wrapper_${cloneIndex}`;
  // 可选：清空克隆项内的已选中状态、输入内容，避免携带原表单的填写内容
  $(clone).find('.is_active').removeClass('is_active');
  $(clone).find('input, textarea').val('');
  // 插入到容器中
  document.getElementById('main-wrapper').appendChild(clone);
  // 计数器自增
  cloneIndex++;
}

// 3. 删除逻辑：事件委托绑定删除按钮
$('#main-wrapper').on('click', '.txt_area span', function () {
  const $itemToDelete = $(this).closest('.parentClass');
  // 限制至少保留一个表单项，避免全删完没法再加
  if ($('#main-wrapper .parentClass').length > 1) {
    $itemToDelete.remove();
  }
})

HTML调整说明 #

把原来删除按钮上的内联事件删掉即可，也就是将<span onclick="delete_el();">x</span>改成<span>x</span>，其他HTML结构不需要改动。

• 如果你需要克隆的时候保留原表单的填写内容和选中状态，把克隆逻辑里清空is_active和输入值的两行代码删掉即可
• 事件委托的父容器只要是页面加载时就存在、不会被动态删除的元素都可以，这里用#main-wrapper精准度最高，性能也最好
• 这个方案支持无限次克隆，所有克隆项内的按钮选中、删除功能都能正常运行，不会出现跨表单状态错乱

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