动态创建元素时，单击时看不到属性

Question

我有一个数据数组，我从中创建元素。当我挂起事件处理程序时， dataset.container 是未定义的。如何获取属性，或者如何以不同的方式创建元素来获取数据类别？const cards = [  [],  [],  []]function renderCategory(card) {  let str = '';  for (let i = 0; i < card.length; i++) {    str += `<div class="card card-category" data-category="${i}">    <div class="card-image">      <img src="${card[i].image}">    </div>    <div class="card-desc">      <div class="card-text">${card[i].name}</div>    </div>    </div>`;  }  return str;}let categoryCard = cards[0];function createCard(cards) {  const main = document.getElementById('category');  main.innerHTML += renderCategory(cards);}createCard(categoryCard)document.addEventListener('DOMContentLoaded', () => {  document.querySelector('#category').addEventListener('click', ({    target: {      dataset    }  }) => {    console.log(dataset.category) // undefined  })})

Answer 1

那么几件事

其一，我无法将您的addEventListener('click', ({ target: { dataset }构造识别为有效的 JavaScript。

我试图不做太多改变，但我

• 返回全套卡片

• 正确地从容器中委托 - 单击卡中的任意位置将返回类别

• 
  

let categoryCard;

const cards = [ 

{ image : "https://via.placeholder.com/128x90.png?text=Card1", name:"Card 1"},

{ image : "https://via.placeholder.com/128x90.png?text=Card2", name:"Card 2"},

{ image : "https://via.placeholder.com/128x90.png?text=Card3", name:"Card 3"}

]

function renderCategory(cards) {

  return cards.map((card,i) => (

    `<div class="card card-category" data-category="${i}">

      <div class="card-image">

        <img src="${card.image}">

      </div>

      <div class="card-desc">

        <div class="card-text">${card.name}</div>

      </div>

    </div>`)).join("");

}

function createCard(cards) {

  const main = document.getElementById('category');

  main.innerHTML += renderCategory(cards);

  categoryCard = main.querySelector(".card-category"); // first card

}

window.addEventListener('load', () => {

  document.querySelector('#category').addEventListener('click', e => {

    const tgt = e.target;

    const parent = tgt.classList.contains("card-category") ? tgt : tgt.closest(".card-category")

    console.log(parent && parent.dataset.category ? parent.dataset.category : "clicked somewhere else")

  })

  createCard(cards)

})

<div id="category"></div>

Answer 2

event.target指的是触发事件的 DOM 树的最低元素。换句话说，根据您单击的位置，target可以是卡片类别 DIV、卡片图像 DIV、卡片描述 DIV、卡片文本 DIV 或 IMG 元素。这就是为什么您无法访问仅在父级上设置的数据属性的原因。

如果您希望始终获取绑定事件的元素，请改用event.currentTarget。但就您而言，您将事件绑定到主#category包装器。如果要将事件绑定到具有该属性的元素data-category，则必须重新组织代码以使用document.createElement而不是生成 HTML 字符串。

请记住，您应该在将事件绑定到元素之前将元素附加到页面。