因此，在我的 Javascript 中，我只能復制一次 HTMl Id="characters" 包裝器。我知道它在技術上應該是一個“類”而不是一個“Id”，因為它將是一個重復的“Id”，但由于某種原因我不明白；當我將“getElementById”更改為“getElementsByClassName”并將我的 HTML“Id”更改為“類”時，它根本不會重復。另外因為我使用的是 clone.Node(true)，所以我在重復的包裝器中失去了“addEventListeners”的功能。有沒有辦法只使用 vanilla Javascript 來糾正這個問題？好像這還不夠煩人，我重復的包裝器似乎把自己扔出了我的 CSS 網格。這一切都非常乏味和麻煩，因此我感謝您提供的任何建議。
這是我當前的 HTML。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<h1><!--D&D DM Tool--><h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="header-container">
<h1 id="header">Game Tools</h1>
</div>
<div class="importantbuttons">
<button id="resetbutton">Next Round</button>
<button id="orderbutton">Order</button>
<button id="zerobutton">Zero</button>
<button id="deadremoverbtn">Bring Out the Dead!</button>
<button id="addnpcbtn">Add NPC</button>
</div>
<div id="grid">
<div class="characters">
<div id="subgrid" class="subgrid" >
<div class="name-bloodiedstuff">
<div class="halfWayDown"></div>
<div class="character-name-display">Name</div>
<button class="name-submit-btn">Submit</button>
<input type="text" class="input-name-el" placeholder="Name">
<div class=int-stuf>
<div class="roll-display">Iniative</div>
<button class="iniativebtn">Submit</button>
<input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
</div>
<div class="healthpoints-display">Healthpoints</div>
<button class="hp-submit-btn">Submit</button>
<input type="number" class="input-hp-el" placeholder="Total HealthPoints">
<button class="hp-deductin-btn">Submit</button>
<input type="number" class="input-hp-deduction-el" placeholder="Damage">
</div>
<div class="weapons-display">Weapons</div>
<button class="weapon-btn">Submit</button>
<input type="text" class="weapon-input-el" placeholder="Weapons">
<button class="active-btn" class="button">Active</button>
</div>
</div>
</div>
</body>
<script src="mainCopy.js"></script>
</html>
Here is my current Javascript duplication function.
addNpcBtn.addEventListener("click",function(){
var characterSubGrids=document.getElementsByClassName("characters");
console.log(characterSubGrids[0]);
var characterSubGridsClone=characterSubGrids[0].cloneNode(true);
let grid=document.getElementById("grid");
console.log(grid);
grid.appendChild(characterSubGridsClone);
});
uj5u.com熱心網友回復：
來自 MDN 上的文章cloneNode
克隆節點會復制其所有屬性及其值，包括內在（行內）偵聽器。它不會復制使用 addEventListener() 添加的事件偵聽器或分配給元素屬性的事件偵聽器（例如，node.onclick = someFunction）。
似乎cloneNode可能已經忽略了您試圖忽略的事件偵聽器。
如果您試圖以一種<div>保留其<button>子級事件偵聽器的方式克隆 a ，我認為 DOM 沒有相應的方法。相反，您必須將相同的事件偵聽器附加到新的克隆按鈕。類似于以下內容：
// Fetch the container and save that element as a constant for future use
const container = document.querySelector('#container')
// Create the addHandlers function for future use
function addHandlers (span) {
// Find the first button child of the element provided as first parameter
const button = span.querySelector('button')
// Add a click event listener to that button
button.addEventListener('click', () => {
// On click, clone the parent element (the span, not the button)
const clone = span.cloneNode(true)
// Find the first input child of this new clone
const input = clone.querySelector('input')
// Set its value to the empty string (by default, the clone would conserve the value of the original)
input.value = ''
// Add handlers to the clone which were lost during cloning
addHandlers(clone)
// Add the clone into the DOM as a new, last child of the container
container.appendChild(clone)
}, false)
}
// Find all elements with class name 'duplicatable' and run the `addHandlers` function on each element
document.querySelectorAll('.duplicatable').forEach(addHandlers)<div id="container">
<h2>Characters</h2>
<span class="duplicatable">
<button>Add a new character</button>
<input type='text' placeholder='name' />
</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441722.html
標籤：javascript html dom duplicates clonenode
上一篇：查看專案而不將滑鼠懸停在其上