JS. Как при клонировании элемента сохранить события?

Question

[anmkh]

Есть меню, которое клонируется на мобилке в попап

// Бургер меню
const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");
const body = document.body;
const childMenu = document.querySelector('.menu-item-has-children')

// Клонируем меню, чтобы задать свои стили для мобильной версии
const menu = document.querySelector(".header__menu").cloneNode(1);
const contacts = document.querySelector(".header__contacts").cloneNode(1);
const address = document.querySelector(".header__address").cloneNode(1);
const actions = document.querySelector(".header__actions").cloneNode(1);

// При клике на иконку hamb вызываем ф-ию hambHandler
hamb.addEventListener("click", hambHandler);

// Выполняем действия при клике ..
function hambHandler(e) {
  e.preventDefault();
  e.stopPropagation();
  // Переключаем стили элементов при клике
  popup.classList.toggle("open");
  hamb.classList.toggle("active");
  body.classList.toggle("noscroll");
  renderPopup();
  
}

// Здесь мы рендерим элементы в наш попап
function renderPopup() {

  popup.appendChild(menu);
  popup.appendChild(contacts);
  popup.appendChild(address);
  popup.appendChild(actions);
}

document.addEventListener("click", function (e) {
  const target = e.target;
  const its_menu = target == popup || popup.contains(target);
  const its_btnMenu = target == hamb;
  const menu_is_active = popup.classList.contains("open");

  if (!its_menu && !its_btnMenu && menu_is_active) {
    popup.classList.remove("open");
    hamb.classList.remove("active");
    body.classList.remove("noscroll");
  }
});

// Закрытие попапа при клике на меню
function closeOnClick() {
  popup.classList.remove("open");
  hamb.classList.remove("active");
  body.classList.remove("noscroll");
}

Для дочерного меню есть такой скрипт со слушателями событий

// Меню по клику в шапке
document.addEventListener("DOMContentLoaded", () => {
  const headerSubmenuItem = document.querySelectorAll(".menu-item-has-children");
  const menuBody = document.querySelector(".sub-menu");
  const mainMenu = document.querySelector("#menu");

  headerSubmenuItem.forEach((item) => {
    item.addEventListener("click", handlerItem);

    // слушаем клик вне меню
    document.addEventListener("click", function (e) {
      const target = e.target;
      const its_menu = target == menuBody || menuBody.contains(target);
      const its_btnMenu = target == menuBody;
      const menu_is_active = item.classList.contains("--open");

      if (!its_menu && !its_btnMenu && menu_is_active) {
        item.classList.toggle("--open");
      }
    });
    // слушаем скролл
    document.addEventListener("scroll", function () {
      //убираем класс если произошел скролл
      item.classList.remove("--open");
    });
  });

  function handlerItem(e) {
      if (e.target.classList.contains('sub-menu-link') || e.target.closest('.sub-menu-link')) {
          // если нажата ссылка в подменю, то предотвращаем действие по умолчанию только для нее
          return;
        }

    const activeMenu = mainMenu.querySelector(".--open");

    if (activeMenu && !this.closest(".--open")) {

      activeMenu.classList.remove("--open");

    }
    e.preventDefault();
    e.stopPropagation();
    this.classList.toggle("--open");
    console.log(e)
  }
});

Но при клонировании не срабатывает скрипт для дочернего меню. Вероятно не клонируется слушатель, как это исправить?

Answer 1

[Сергей delphinpro]

Второй скрипт для дочернего меню написан криво.

headerSubmenuItem.forEach((item) => {
    document.addEventListener("click", function (e) {
    });
});

Слушатель вешается на весь документ, очевидно, используется делегация. Но при этом слушатель вызывается энное количество раз, по количеству сабитемов.

Я бы переписал, вынеся document.addEventListener на верхний уровень, и поиск необходимых элементов выполнял бы уже внутри этого обработчика. Тогда будет неважно, когда меню появится на странице, клонировано оно, или нет.

Comments

[anmkh]

Понял. А как обратиться к конкретному item?

Так пишу не правильно
item(this).classList.toggle("--open");

[Сергей delphinpro]

anmkh, кликнутый элемент всегда лежит в e.target.
Если у итема есть вложенные элементы, то сам итем следует искать вверх по дереву

e.target.closest('.item-class')

https://learn.javascript.ru/event-delegation