Java Script - cloneNode (true), клонировать слишком много элементов - PullRequest
Новая
       63

Java Script - cloneNode (true), клонировать слишком много элементов

0 голосов
/ 27 марта 2020

Я доберусь до точки

Что я пытаюсь?: Я пытаюсь клонировать элементы, чтобы каждый элемент при нажатии клонировал сам себя. Даже те, которые были клонированы.

Проблема: Проблема в том, что когда у меня клонируется, например, 10 элементов, после нажатия на первый (оригинальный) элемент он клонирует следующие 10 элементов. Только последний (самый новый) клон клонирует один элемент, независимо от того, сколько элементов у меня уже есть.

Информация: Без app () в конце функции «клон», только исходный элемент добавляет больше клонов.

Это проблема с clondeNode () или, возможно, с неправильным выравниванием addEventListener?

Заранее спасибо за помощь, Мэтт

JS: 

app = () => {
    const divs = document.querySelectorAll('.div');

    divs.forEach((div) => {
        div.addEventListener('click', () => clone(event))
    })

}

clone = (event) => {
    const div = event.target;
    const clone = div.cloneNode(true);

    document.body.appendChild(clone)

    app()
}

app()

HTML: 

<body>
    <div class='div'>DIV FOR CLONING</div>
    <script src="main.js"></script>
</body>

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

При вызове app() после щелчка вы добавляете новый прослушиватель событий ко всем существующим элементам, который является дополнением к обработчику, который они уже подключили к ним.

Вместо вызова app там , просто добавьте слушателя во вновь созданный клон.

Во-вторых, вы используете одно и то же имя для функции и переменной. Это сбивает с толку.

Так что назовите эту переменную по-разному: 

const clonedDiv = div.cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.addEventListener('click', clone);

Как видите, вам также не нужна эта функция стрелки. Просто передайте clone в качестве аргумента функции.

0 голосов
/ 27 марта 2020

Внутри функции клона вы снова вызываете приложение () 

app = () => {
    const divs = document.querySelectorAll('.div');

    divs.forEach((div) => {
        div.addEventListener('click', () => clone(event))
    })

}

clone = (event) => {
    const div = event.target;
    const clone = div.cloneNode(true);

    document.body.appendChild(clone)

    app() // <<<<<<-------HERE 
}

, которое заканчивается рекурсией, потому что каждый раз, когда вы щелкаете по нему, добавляется новый слушатель.

https://codesandbox.io/s/agitated-cohen-0j6dm

  const clone = event => {
    const div = event.target;
    const cloned = div.cloneNode(true);
    document.body.appendChild(cloned);
    cloned.addEventListener("click", clone);
  };
...