JavaScript addEventListener到隐藏元素

Question

我有以下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元素？还是这里出了什么问题？