Почему не работает делегирование JS?

Question

[Алексей Веснин]

Ребят, помогите.
Подключил к странице JS библиотеку zoom, все работает ОК, но после подгрузки товаров ajax запросом, перестает работать библиотека zoom. Почему перестает работать - разобрался(библиотека получает элементы и работает с ними, после подгрузки по AJAX она о них не знает).

Стал гуглить и понял, что нужно делать делегирование, вот код:

(() => {
    document.body.innerHTML += `<div id="lumos-container">
                                    <img src="" id="lumos-image">
                                </div>`;
    const lummContainer = document.getElementById('content'); // добавил контейнер
    const lumosContainer = document.getElementById('lumos-container');
    const lumosImage = document.getElementById('lumos-image');
    const elements = document.querySelectorAll('[data-action="lumos"]');
    const transitionSpeedInMilliseconds = 250;

    window.addEventListener('keyup', (event) => {
        if (event.key === 'Escape') {
            hideLumos();
        }
    });

    // elements.forEach((element) => {
    //     element.addEventListener('click', () => {
    //         handleElementClick(element);
    //     });
    // });


lummContainer.onclick = (e) => {
   var target = e.target; // элемент который вызвал событие
   var lumoelement = target.getAttribute('[data-action="lumos"]');
   
   if (lumoelement) {
        handleElementClick(lumoelement);
      }
}




    lumosContainer.addEventListener('click', hideLumos);

    function handleElementClick(htmlElement) {
        updateLumosImage(getImageUrl(htmlElement));
        showLumos();
    }

    function getImageUrl(htmlElement) {
        return htmlElement.attributes['data-lumos-src'] === undefined
            ? htmlElement.attributes['src'].value
            : htmlElement.attributes['data-lumos-src'].value;
    }

    function updateLumosImage(imageUrl) {
        lumosImage.attributes['src'].value = imageUrl;
    }

    function showLumos() {
        if (!lumosContainerIsVisible()) {
            lumosContainer.classList.remove('hidden');
            lumosContainer.classList.add('visible');
        }
    }

    function hideLumos() {
        if (lumosContainerIsVisible()) {
            lumosContainer.classList.add('hidden');

            setTimeout(() => {
                lumosContainer.classList.remove('visible');
                lumosContainer.classList.remove('hidden');
                lumosImage.attributes['src'].value = '';
            }, transitionSpeedInMilliseconds);
        }
    }

    function lumosContainerIsVisible() {
        return lumosContainer.classList.contains('visible');
    }
})();

Пример кода категории(упрощенный вариант):

<div id="content">

<div class="category-panel-block">
      <div class="sort-block"></div>
</div>

      <div class="row category-products-wrapper-block" data-bal="append-bal">
        

<! -- оставил только один товар, остальные удалил -->
<div id="category-product-block" class="item item-good" data-bal="element-bal">


  <div class="item-good-wrapper">
    <div class="item-good_img">
      <img data-action="lumos" src="/2812201812_test_1323sg0-228x228.jpg" data-lumos-src="/2812201812_test_1323sg0-800x800.jpg" alt="Мужские наручные часы DANIEL KLEIN (Тестовый товар)" class="lumo-zoom-img">
    </div>
  </div>

   <div class="item-good_buttons">
        <button class="btn2 btn2-buy-item btn2-buy_small smca-call-button" type="button" onclick="getOCwizardModal_smca('33','add');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Уже в корзине</span></button>
    </div>

 </div>


</div></div></div>

вроде все правильно пишу, но не работает, что не так??

Comments

[Сергей delphinpro]

Во-первых, идентификаторы. Я не увидел именно здесь их использования, но судя по комменту их много повторяющихся. Идентификатор должен быть уникален.

<! -- оставил только один товар, остальные удалил -->
<div id="category-product-block" class="item item-good" data-bal="element-bal">

Во-вторых, что это? Оно работает?
target.getAttribute('[data-action="lumos"]');

метод getAttribute принимает имя атрибута и возвращает его значение
target.getAttribute('data-action'); // 'lumos'

В-третьих, вы получаете элементы единожды и не обновляете список

const elements = document.querySelectorAll('[data-action="lumos"]');

Хотя я и не увидел где это используется...

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

Answer 1

[Алексей Веснин]

Нашел решение, необходимо сделать так:

(() => {

var foo = function() {


    var targetblock = document.getElementById('targetblock');

    targetblock.insertAdjacentHTML("beforeend", "<div id='lumos-container'><span id='lumos-close' style='position: absolute; right: 15px; top: 15px; padding: 10px 15px; background: #ededed; border-radius: 5px; color: #666;'>Закрыть</span><img src='' id='lumos-image'></div>");
    
    const lummContainer = document.getElementById('content'); // добавил контейнер

    const lumosContainer = document.getElementById('lumos-container');
    const lumosImage = document.getElementById('lumos-image');
    const elements = document.querySelectorAll('[data-action="lumos"]');
    const transitionSpeedInMilliseconds = 250;

    window.addEventListener('keyup', (event) => {
        if (event.key === 'Escape') {
            hideLumos();
        }
    });

    // elements.forEach((element) => {
    //     element.addEventListener('click', () => {
    //         handleElementClick(element);
    //     });
    // });

    lummContainer.onclick = (e) => {
   var target = e.target; // элемент который вызвал событие
   var action = target.dataset.action;

   if (action == 'lumos') {
        handleElementClick(target);
      }
}



    lumosContainer.addEventListener('click', hideLumos);

    function handleElementClick(htmlElement) {
        updateLumosImage(getImageUrl(htmlElement));
        showLumos();
    }

    function getImageUrl(htmlElement) {
        return htmlElement.attributes['data-lumos-src'] === undefined
            ? htmlElement.attributes['src'].value
            : htmlElement.attributes['data-lumos-src'].value;
    }

    function updateLumosImage(imageUrl) {
        lumosImage.attributes['src'].value = imageUrl;
    }

    function showLumos() {
        if (!lumosContainerIsVisible()) {
            lumosContainer.classList.remove('hidden');
            lumosContainer.classList.add('visible');
        }
    }

    function hideLumos() {
        if (lumosContainerIsVisible()) {
            lumosContainer.classList.add('hidden');

            setTimeout(() => {
                lumosContainer.classList.remove('visible');
                lumosContainer.classList.remove('hidden');
                lumosImage.attributes['src'].value = '';
            }, transitionSpeedInMilliseconds);
        }
    }

    function lumosContainerIsVisible() {
        return lumosContainer.classList.contains('visible');
    }

};

document.addEventListener("DOMContentLoaded", function(event) {
foo();
console.log("Загрузка DOMContentLoaded произошла!");
  });
   
    

})();