我有一個用例，我需要創建一系列頂部帶有標簽的“卡片”（因此每張卡片都有標簽）。為了實作這一點，我打算擁有一個模板元素，我克隆然后填充它。這可以按預期作業，除了克隆元素上的選項卡外，單擊時它們控制原始模板物件而不是當前克隆。
我假設這是由于已克隆的事件偵聽器仍連接到原始物件？有什么方法可以斷開它們并確保它們指向新克隆的物件？
下面的示例代碼...
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
底線是選項卡目標必須具有唯一識別符號。如果要復制標記本身，也會遇到同樣的問題。以下是您可以這樣做的方法。請注意，我已移動模板以簡化操作。
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516848.html