返回的数据未定义

Question

下午好，

我有一个解构的对象，我想将每个对象的 id 动态地分配给创建的元素。

使用 e 监听点击时，我无法获得正确的结果，因为 e.target.dataset.id 返回为未定义。

这是代码片段

import { menuArr as menuOptions } from "/data.js"

// handle Clicks
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('plus-btn')) { 
        console.log(e.target.dataset.id);
    }
});

// renders the menu
function renderMenuOpts(options) {
    return options.map(option => {
        const {
            name,
            ingredients,
            id,
            price,
            emoji,
        } = option;
        const ingredientString = ingredients.join(', ');

        return `
        <div class="menu-option">
            <span class="emoji">${emoji}</span>
            <div class="option-details">
                <h3 class="option-name">${name}</h3>
                <p class="list-ingredients">${ingredientString}</p>
                <p class="price">${price}€</p>
            </div>
            <button class="plus-btn" data-id="${option.id}">
                <img src="/images/plus.png" class="plus-btn" alt="Plus icon">
            </button>
        </div>
        `;
    }).join(' ');
}

// render the total Menu 
function addToCashout(optionId) {
    document.getElementById('orderTotal').style.display = 'block';
    console.log(optionId);
}

function render() {
    document.getElementById('selectOptions').innerHTML = renderMenuOpts(menuOptions);
}

render();

使用数据集的问题

Answer 1

因为您的按钮包含图像，所以正在处理的事件很可能来自 that 元素而不是其按钮父元素。

您可以更改您的处理程序以反映这一点：

document.addEventListener('click', function (e) {

  // Find the button - the closest (ancestor) element -
  // that also has a plus-btn class and then grab _its_
  // dataset instead
  const btn = e.target.closest('button.plus-btn');
  console.log(btn.dataset.id);
});

附加文档

• closest

工作示例

// handle Clicks
document.addEventListener('click', function (e) {
  const btn = e.target.closest('button.plus-btn');
  console.log(btn.dataset.id);
});

// renders the menu
function renderMenuOpts(options) {
    return options.map(option => {
        const {
            name,
            ingredients,
            id,
            price,
            emoji,
        } = option;
        const ingredientString = ingredients.join(', ');

        return `
        <div class="menu-option">
            <span class="emoji">${emoji}</span>
            <div class="option-details">
                <h3 class="option-name">${name}</h3>
                <p class="list-ingredients">${ingredientString}</p>
                <p class="price">${price}€</p>
            </div>
            <button class="plus-btn" data-id="${option.id}">
                <img src="/images/plus.png" class="plus-btn" alt="Plus icon">
            </button>
        </div>
        `;
    }).join(' ');
}

// render the total Menu 
function addToCashout(optionId) {
    document.getElementById('orderTotal').style.display = 'block';
    console.log(optionId);
}

function render() {
    document.getElementById('selectOptions').innerHTML = renderMenuOpts([
    {
            name: 'Name',
            ingredients: ['ingredient'],
            id: 1,
            price: 1,
            emoji: 'emoji',
        },
    {
            name: 'Name2',
            ingredients: ['ingredient1'],
            id: 2,
            price: 100,
            emoji: 'emoji2',
        }]);
}

render();

<div id="selectOptions"></div>

Answer 2

发生这种情况是因为您的图像和按钮都具有

plus-btn

类，并且最里面的

<img>

正在捕获点击。

解决此问题的一种方法是检查目标是否有父元素，看看这是否是您想要的：

// handle Clicks
document.addEventListener('click', function (e) {
    const parent = e.target.parentElement;
    if (parent && parent.classList.contains('plus-btn')) { 
        console.log(parent.dataset);
    }
});