title: when dynamically creating an element, when clicking does not see attributes
body: <p>I have an array of data from which I am creating elements. And when I hang the event handler, then the dataset.container is undefined. How do I get to the attributes, or how do I create elements differently to get the data-category?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cards = [
    [],
    [],
    []
  ]
  
  function renderCategory(card) {
    let str = '';
    for (let i = 0; i &lt; card.length; i++) {
      str += `&lt;div class="card card-category" data-category="${i}"&gt;
      &lt;div class="card-image"&gt;
        &lt;img src="${card[i].image}"&gt;
      &lt;/div&gt;
      &lt;div class="card-desc"&gt;
        &lt;div class="card-text"&gt;${card[i].name}&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;`;
    }
    return str;
  }
  let categoryCard = cards[0];
  
  function createCard(cards) {
    const main = document.getElementById('category');
    main.innerHTML += renderCategory(cards);
  }
  createCard(categoryCard)
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    document.querySelector('#category').addEventListener('click', ({
      target: {
        dataset
      }
    }) =&gt; {
      console.log(dataset.category) // undefined
    })
  })</code></pre>
  </div>
  </div>
  </p>