javascript - jQuery on click 方法未在数组元素上调用

Question

我正在将一系列产品打印到屏幕上。每个产品都有一个删除按钮。代码如下:-

const output = document.getElementById('output');

function delete_item(){
    var id = $(this).attr('data-id');
    console.log("ID " + id);
}

let productsArray = [];

$.getJSON('/products', products => {
    let outputContent = '';

    productsArray = Object.values(products);

    productsArray.forEach(product => {  
        outputContent += `<div data-id="${ product.ID }">
                          <div id='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div>
                          <div id='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div>
                          <div id='product'> <span class='name'> <a href=''>${product.NAME}</a></span>
                          <span class='price'>Price: £${product.PRICE}</span>
                          </div>`;

    });

    $('#delete').click(function(){
        delete_item();
    });

    output.innerHTML = outputContent;
});

目前，我只想让 delete_item 函数打印出正确的产品 ID。但是，该函数永远不会被调用。

我的.click()函数是否在删除div的范围内，为什么点击删除div时没有调用click()函数？

Answer 1

您要添加具有相同 ID 的多个元素。 id 在文档中应该是唯一的。相反，使用类:

productsArray.forEach(product => {  
    outputContent += `  <div data-id="${ product.ID }">
                        <div class='edit'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></div>
                        <div class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></div>
                        <div class='product'> <span class='name'> <a href=''>${product.NAME}</a></span>
                        <span class='price'>Price: £${product.PRICE}</span>
                        </div>`;

});

$('.delete').click(function(){
    delete_item($(this).parent().data("id"));
});

这会将 id 发送到函数:

function delete_item(id){
    console.log("ID " + id);
}