克隆Bootstrap导航标签控件后，点击克隆标签仍控制原模板的问题

你的问题根本原因不是事件监听器绑定到原对象，而是Bootstrap标签页的href属性用了全局类选择器（.one、.two）——克隆卡片后，页面上会存在多个相同类名的标签内容容器，点击标签时会匹配所有对应类的元素，导致所有卡片的标签页同时切换，看起来像是控制了原模板。

解决方案：为每个克隆卡片生成唯一标识 #

要让每个卡片的标签页只控制自身内容，需要给每个卡片的标签和对应内容容器设置唯一ID，避免全局类名冲突。

步骤1：修改模板结构，替换为占位符 #

把模板里的类选择器改成带占位符的ID，方便后续替换为唯一值：

<div class="col mytab template d-none"> <!-- 添加d-none隐藏原模板 -->
  <div class="card mb-4 rounded-3 shadow-sm ">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-pills nav-pills">
        <li class="nav-item">
          <a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#tab-one-{uniqueId}">one</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-bs-toggle="tab" href="#tab-two-{uniqueId}">two</a>
        </li>
      </ul>
    </div>
    <div class="card-body tab-content">
      <div class="tab-pane active" id="tab-one-{uniqueId}">
        <h1>ONE</h1>
      </div>
      <div class="tab-pane" id="tab-two-{uniqueId}">
        <h1>Two</h1>
      </div>
    </div>
  </div>
</div>

步骤2：修改克隆逻辑，生成唯一标识并初始化标签页 #

在克隆卡片时，生成唯一ID替换占位符，再重新初始化Bootstrap标签页组件：

// 用递增数字生成唯一ID，也可以用时间戳Date.now()
let cardId = 1;

document.querySelector("#add_card").addEventListener("click", add_card);

function add_card() {
  // 克隆模板元素
  const clone = document.querySelector('.mytab.template').cloneNode(true);
  // 移除模板类和隐藏类，避免后续重复克隆或隐藏新卡片
  clone.classList.remove('template', 'd-none');
  
  // 生成当前卡片的唯一标识
  const uniqueId = `card-${cardId++}`;
  
  // 替换所有标签的href属性
  clone.querySelectorAll('[data-bs-toggle="tab"]').forEach(link => {
    const newHref = link.getAttribute('href').replace('{uniqueId}', uniqueId);
    link.setAttribute('href', newHref);
  });
  
  // 替换所有标签内容容器的ID
  clone.querySelectorAll('.tab-pane').forEach(pane => {
    const newId = pane.getAttribute('id').replace('{uniqueId}', uniqueId);
    pane.setAttribute('id', newId);
  });
  
  // 将克隆卡片添加到页面
  document.querySelector('#card_list').appendChild(clone);
  
  // 初始化新卡片的标签页组件，确保事件绑定到当前卡片
  new bootstrap.Tab(clone.querySelector('.nav-link.active'));
}

原理说明 #

• 每个卡片的标签和内容容器都有了唯一ID，点击标签时只会匹配自身卡片内的对应容器
• 手动初始化bootstrap.Tab组件，确保新克隆的元素拥有独立的事件绑定，不会和原模板冲突

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