let btn = document.querySelector('button'),
ul = document.getElementById('lista');
btn.onclick = () =>{
ele = ul.children[0].cloneNode(true, true);
ele.innerHTML = 'item #' + (ul.children.length +1)
ul.appendChild(ele);
}
Array.prototype.forEach.call(ul.children , child => {
child.onclick = () => {
document.getElementById('heading').textContent = child.textContent;
Array.prototype.forEach.call(ul.children, wald =>{
wald.classList.remove('active')
})
child.classList.add('active');
}
})
*{
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 60%;
margin: 30px auto;
border: 1px solid;
padding: 30px 10px;
}
.container h1{
text-align: center;
background-color: tomato;
color: #fff;
}
.container button{
padding: 10px 20px;
background-color: tomato;
font-weight: bold;
font-size: 18px;
color: #FFF;
border: none;
cursor: pointer;
}
.container button:active{
transform: scale(.99)
}
.container ul li{
list-style-position: inside;
padding: 7px 15px
}
.active{
background-color: tomato;
color: #FFF;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="container">
<h1 id="heading">item here ! </h1>
<button>add item</button>
<ul id="lista">
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>克隆元素问题
此代码的第一个事件是将新的克隆元素添加到 <ul>当我点击按钮时。
第二个事件，当我点击 li 时它假设有类 .active .. 但是这第二个事件只适用于原始项目而不适用于新项目。
那么将处理程序附加到新元素的解决方案是什么？
最佳答案
事件处理程序在开始时只被调用一次，所以它只能看到现有的元素。 我的修复是每次添加新元素时都会调用事件处理程序。 此外，要优化它，您不必每次都经过循环并在所有项目上添加事件监听器。只有新项目才会在按钮单击时添加事件监听器
let btn = document.querySelector('button'),
ul = document.getElementById('lista');
btn.onclick = () => {
ele = ul.children[0].cloneNode(true, true);
ele.innerHTML = 'item #' + (ul.children.length + 1)
ul.appendChild(ele);
addHandlerToItem(ele);
}
var eventHandler = function() {
Array.prototype.forEach.call(ul.children, child => {
addHandlerToItem(child);
});
}
var addHandlerToItem = function(child) {
child.onclick = () => {
document.getElementById('heading').textContent = child.textContent;
Array.prototype.forEach.call(ul.children, wald => {
wald.classList.remove('active')
})
child.classList.add('active');
}
};
eventHandler();* {
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 60%;
margin: 30px auto;
border: 1px solid;
padding: 30px 10px;
}
.container h1 {
text-align: center;
background-color: tomato;
color: #fff;
}
.container button {
padding: 10px 20px;
background-color: tomato;
font-weight: bold;
font-size: 18px;
color: #FFF;
border: none;
cursor: pointer;
}
.container button:active {
transform: scale(.99)
}
.container ul li {
list-style-position: inside;
padding: 7px 15px
}
.active {
background-color: tomato;
color: #FFF;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="container">
<h1 id="heading">item here ! </h1>
<button>add item</button>
<ul id="lista">
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>关于javascript - 单击时克隆的元素无法使用 Javascript [使用 Vanilla Js no JQuery]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52346450/