JavaScript addEventListener для скрытого элемента - PullRequest
Новая
       8

JavaScript addEventListener для скрытого элемента

0 голосов
/ 24 августа 2018

У меня есть этот HTML-код: 

document.querySelectorAll('[uk-toggle]').forEach(function(el) {
  if (el === undefined)
    return false;

  el.addEventListener('click', function() {
    const toggleParams = el.getAttribute('uk-toggle') ? el.getAttribute('uk-toggle').split(';') : '';
    let targetSelector = undefined;

    for (let i = 0; i < toggleParams.length; i++) {
      toggleParams[i] = toggleParams[i].replace(' ', '');
      const paramHash = toggleParams[i].split(':');

      if (paramHash[i] === 'target') targetSelector = paramHash[1];
    }

    document.querySelectorAll(targetSelector).forEach(function(targetElement) {
      if (targetElement.hasAttribute('hidden')) {
        targetElement.setAttribute('hidden', true);
      } else {
        targetElement.removeAttribute('hidden');
      }
    });
  });
});
<button uk-toggle="target: #product-panel">Product</button>
<section id="product-panel" hidden>
  <div>
    <img uk-toggle="target: #product-info-1" src="...">
    <img uk-toggle="target: #product-info-2" src="...">
    <img uk-toggle="target: #product-info-3" src="...">
  </div>
  <ul id="product-info-1"> ... </ul>
  <ul id="product-info-1" hidden> ... </ul>
  <ul id="product-info-1" hidden> ... </ul>
</section>

Теперь первый случай нажатия на кнопку работает, но нажатие на изображение не работает.

Если я удаляю свойство hidden из section, все работает нормально.

Как я могу добавить прослушиватель событий к скрытому элементу HTML? Или в чем тут проблема?

...