javascript - 尝试动态创建删除按钮并在javascript中调用删除功能

Question

此页面的想法是从我的 Java 应用程序加载“技能”并动态创建一个删除按钮，允许我从应用程序中删除这些“技能”。

尝试单击按钮删除技能时收到错误。

manageTech:1 Uncaught ReferenceError: deleteMe is not defined at HTMLButtonElement.onclick (manageTech:1)

js 文件:

$( document ).ready( () => {

    var url = window.location;

    // GET REQUEST
    $("#btnGetFiles").click( (event) => {
        event.preventDefault();
        ajaxGet();
    });

function deleteMe(id) {
    window.alert("Button clicked, id " + id + ", text");
    $.ajax({
        url: '/api/technologyList' + '/' + id,
        type: 'DELETE',
        success: function() {
           ajaxGet();
       }
    })
}

// DO GET
function ajaxGet() {
$.ajax({
    type: 'GET',
    url: '/api/technologyList',
    success: function (skills) {
        $.each(skills, function (i, skill) {
            $('#listFiles').append('<tr>' + '<td>' + '<button ' +
                'type="submit" ' +
                'data-id="' + skill.id + '" ' +
                'onclick="deleteMe('+skill.id+')"' +
                'name="deletebtn">' +
                'Delete' +
                '</button>' + '</td>' +
                '<td>' + skill.id + '</td>' +
                '<td>' + skill.logo + '</td>' +
                '<td>' + skill.techName + '</td></tr>')
        })



    }
    });
    }
});

Answer 1

您的 deleteMe 不在顶层 - 它在您的 $( document ).ready( () => { 中，所以它不是全局变量，所以内联处理程序 onclick="deleteMe('+skill.id+')" 失败。(内联处理程序只能在顶层引用全局变量。)

虽然您可以通过将 deleteMe 移到外部来修复它，但内联处理程序是不好的做法；考虑改为使用 Javascript 正确附加事件监听器。删除内联处理程序，并使用事件委托(delegate):

$('#listFiles').on('click', 'button[name="deletebtn"]', function() {
  deleteMe(this.dataset.id);
});