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

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 = [&nbsp;{ 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) {&nbsp; return cards.map((card,i) => (&nbsp; &nbsp; `<div class="card card-category" data-category="${i}">&nbsp; &nbsp; &nbsp; <div class="card-image">&nbsp; &nbsp; &nbsp; &nbsp; <img src="${card.image}">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="card-desc">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-text">${card.name}</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>`)).join("");}function createCard(cards) {&nbsp; const main = document.getElementById('category');&nbsp; main.innerHTML += renderCategory(cards);&nbsp; categoryCard = main.querySelector(".card-category"); // first card}window.addEventListener('load', () => {&nbsp; document.querySelector('#category').addEventListener('click', e => {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; const parent = tgt.classList.contains("card-category") ? tgt : tgt.closest(".card-category")&nbsp; &nbsp; console.log(parent && parent.dataset.category ? parent.dataset.category : "clicked somewhere else")&nbsp; })&nbsp; 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 字符串。请记住，您应该在将事件绑定到元素之前将元素附加到页面。