为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

子衿沉夜 2023-08-24 17:33:03
我有一个数据数组,我从中创建元素。当我挂起事件处理程序时, 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  })})
查看完整描述

2 回答

?
阿波罗的战车

TA贡献1862条经验 获得超6个赞

那么几件事

其一,我无法将您的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>


查看完整回答
反对 回复 2023-08-24
?
扬帆大鱼

TA贡献1799条经验 获得超9个赞

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

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

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


查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 121 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信