为什么我的 data-id 显示为空？它没有被正确传递给 Javascript

Question

我的 html 中有一个“数量”按钮，如下所示：

<button class="quantityButton" data-id="{{ card['AssetID'] }}">Quantity</button>

AssetID 由本地 inventory.db 动态更新。

在 Javascript 中，我尝试通过单击“数量”按钮来打印 data-id 的值，但无论如何它都显示为“Null”。

令人困惑的是我有一个类似的“删除”按钮，如下所示：

<button class="deleteButton" data-id="{{ card['AssetID'] }}">Delete</button>

当我与“删除”按钮交互时，它会正确显示 data-id 的当前值。

JavaScript 如下所示：

function handleDeleteButtonClick() {
    const assetId = this.getAttribute('data-id');
    console.log(assetId) //This works!

function handleQuantityButtonClick() {
    // Retrieve the asset ID from the button's data attribute
    const assetId = this.getAttribute('data-id');
console.log("Clicked on Quantity, data-id is:", this.getAttribute('data-id'));

我很困惑，这个问题是因为我设置了两次“data-id”而引起的吗？或者我在这里遗漏了一些明显的东西？

Answer 1

我发现了为什么 data-id 没有被正确传递到 Javascript 代码中。

我有另一个脚本来处理库存系统内部的搜索，它根据 Inventory.db 的内容动态生成按钮元素。下面的例子：

cards.forEach(card => {
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td>${card['CardName']}</td>
        <td>${card['Set']}</td>
        <td>${card['Rarity']}</td>
        <td>${card['Quantity']}</td>
        <td>${card['Condition']}</td>
        <td>${card['Foil'] ? 'Yes' : 'No'}</td>
        <td>
            <button class="editButton">Edit</button>
            <div class="additionalActions" style="display: none;">
                <button class="quantityButton">Quantity</button>
                <button class="cancelRowButton">Cancel</button>
                <button class="deleteButton" data-id="${card['AssetID']}">Delete</button>
            </div>
        </td>
    `;

我没有意识到这优先于默认的 HTML，并解释了为什么 data-id 没有被传递给 Javascript。将 (data-id="${card['AssetID']}") 添加到该行后，它解决了问题并运行没有任何问题。

经验教训：检查所有脚本并 CNTRL+F 解决代码中遇到的问题。感谢您的帮助。