克隆时引导导航选项卡控制原始导航

Question

我有一个用例，需要创建一系列"；卡片"；顶部有标签(所以每张卡都有标签(。为了实现这一点，我打算创建一个模板元素，然后克隆并填充。这可以按预期工作，但克隆元素上的选项卡除外，单击时它们将控制原始模板对象，而不是当前克隆。

我假设这是因为已经克隆的事件侦听器仍然连接到原始对象？是否有某种方法可以断开它们的连接，并确保它们指向新克隆的对象？

下面的示例代码。。。

document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.mytab.template').cloneNode(true)
document.querySelector('#card_list').appendChild(clone);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col mytab template">
<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=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

Answer 1

底线是选项卡目标必须具有唯一的标识符。如果要复制标记本身，也会遇到同样的问题。以下是你可以做到的方法。请注意，我已经移动了模板以简化操作。

let iterator = 0;
document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.template').cloneNode(true);
// add unique classes to each pane element
clone.querySelectorAll('.tab-pane').forEach((el, i) => {
el.classList.add('tab_' + iterator + i);
});
clone.querySelectorAll('.nav-link').forEach((el, i) => {
// update href attributes on each tab element to match panes
el.setAttribute('href', '.tab_' + iterator + i);
// initialize Bootstrap tabs on each tab element
const tab = new bootstrap.Tab(el)
el.addEventListener('click', event => {
event.preventDefault();
tab.show();
})
});
// append the clone
document.querySelector('#card_list').appendChild(clone);
// show the clone
clone.classList.remove('d-none');
iterator++;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col">
<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=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="col template 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">one</a>
</li>
<li class="nav-item">
<a class="nav-link">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane active">
<h1>ONE</h1>
</div>
<div class="tab-pane">
<h1>Two</h1>
</div>
</div>
</div>
</div>