如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件在 forEach() 语法中

如何解决如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件在 forEach() 语法中

我的目的是制作一个无限的图像视图功能。

所以我使用 cloneNode、appendChild 成功添加了相同的运动和新元素，但是新元素中的那个按钮在相同的点击事件中不起作用。

如何向新元素添加相同的点击事件？

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>
                    <li>
                        <div className='showWindow'>
                            <button className='xBtn'></button>
                            <button></button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
</body>
</html>

解决方法

你必须在这里解决两个问题 -

HTML 元素没有 className 属性。您必须在每个元素上将其更改为 class，以便它接受正确的类，并且您可以使用 getElementsByClassName() 方法正确选择 DOM 节点。
由于您有制作无限图像视图的愿景，因此无需为每个按钮添加这么多单独的事件侦听器，您可以使用事件委托。您可以找到解释的事件委托here。这将帮助您提高应用程序性能。

如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件 在 forEach() 语法中

如何解决如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件 在 forEach() 语法中

解决方法

如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件在 forEach() 语法中

如何解决如何在使用 cloneNode、appendChild 创建的新节点中添加相同的点击事件在 forEach() 语法中