Javascript 删除条目数组按钮 OnClick

Question

我目前正在尝试使用每行旁边的删除按钮从本地存储列表(数组)中删除条目。我制作了删除它的功能，以及添加按钮/每行的功能。它看起来像这样:

function printData() {
    let output,
        i;
    let element;

    output = "";
    for(i=0; i<commentsData.length; i++) {

        // adding the delete button to each entry:
        element = "<em id='i'>"+commentsData[i].date+"</em> -- " +
            commentsData[i].contents + "<button id='delete' onclick='deleteEntry()'>Delete</button>" + "<br>";

        output += element;

    }

    $("#comments").html(output);
}

这是我的删除功能:

function deleteEntry() {

    alert("Test");
    if (commentsData.length > 0) {
        commentsData.splice(commentsData.indexOf($(this)),1);
    }

    printData();
}

我也尝试在我的 init 函数中调用它:

    function init() {
    loadData();
    printData();

    $("#delete").click(deleteEntry);

};  

但目前当我单击按钮时它不起作用。原因可能是什么？ 我还不确定我的deleteEntry现在是否正常工作，但我的问题是单击按钮不起作用。您不需要修复我的 deleteEntry 方法 - 我自己会这样做，我只需要您的帮助让我的按钮正常工作，我将非常感激! :)

Answer 1

$("#delete").click(deleteEntry); 适用于 DOM 上已存在的元素，但不适用于动态创建的元素。

您需要绑定(bind)这些元素，是的，正如其他人提到的，ID 应该是唯一的，因此您应该使用类。

$(document).on('click', '.myDelButton', function() {
    deleteEntry();
});

我认为这应该可行，如果不行请告诉我。