I am striving to create an infinite imageview feature.
Although I have managed to implement the same movement and add new elements using cloneNode and appendChild, the button in the new element does not respond to the click event as expected.
How can I ensure that the new elements also have the same click event functionality?
let listMarginTop = 70;
let listMarginLeft = 40;
let list = document.getElementById('firstLine');
let lists = document.getElementsByTagName('li');
let listsArr = [...lists];
let z = 10;
let transDelay = 1;
let xBtn = document.getElementsByClassName('xBtn');
let xBtnArr = [...xBtn];
for(let i = 0; i < listsArr.length; i++)
{
listsArr[i].style.transition = 'all 0.5s linear ' + transDelay + 's';
transDelay -= 0.1;
listsArr[i].style.zIndex = z;
z--;
listsArr[i].style.marginTop = listMarginTop + 'vh';
listsArr[i].style.marginLeft = listMarginLeft + 'vw';
listMarginTop -= 6;
listMarginLeft -= 6;
}
let lastChildMarginTop = 12;
let lastChildMarginLeft = -20;
xBtnArr.forEach((x) => {
x.addEventListener('click', () => {
let copyWindow = x.parentElement.parentElement.cloneNode(true);
x.parentElement.parentElement.style.opacity = '0';
copyWindow.style.marginTop = parseInt(list.lastChild.style.marginTop) - 6 + 'vh';
copyWindow.style.marginLeft = parseInt(list.lastChild.style.marginLeft) - 6 + 'vw';
copyWindow.style.zIndex = z;
z--;
lastChildMarginTop -= 6;
lastChildMarginLeft -= 6;
list.appendChild(copyWindow);
let listChildArr = [...list.childNodes];
listChildArr.forEach(win => {
win.style.marginTop = parseInt(win.style.marginTop) + 6 + 'vh';
win.style.marginLeft = parseInt(win.style.marginLeft) + 6 + 'vw';
})
xBtn = document.getElementsByClassName('xBtn');
xBtnArr = [...xBtn];
console.log(xBtnArr);
})
})* {margin: 0; padding: 0; border: 0;}
ul
{
list-style-type: none;
position: relative;
}
.rightMain
{
height: 100vh;
flex: 7;
flex-wrap: wrap;
overflow: hidden;
}
#container
{
position: absolute;
z-index: 3;
}
ul li
{
margin-top: -10vh;
margin-left: -10vw;
position: absolute;
}
.showWindow
{
width: 25vw;
height: 25vh;
border: 1px solid black;
background-color: white;
}
.showWindow button
{
margin: 0.5vw 0.5vw 0;
width: 1vw;
height: 1vw;
border-radius: 50%;
border: 1px solid black;
background-color: white;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='rightMain' className='rightMain'>
<div id="container">
<ul id='firstLine'>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
<li>
<div className='showWindow'>
<button className='xBtn'></button>
<button></button>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>