Question

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

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

manageTech：1未捕获的ReferenceError：在以下位置未定义deleteMe 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正确附加事件监听器。删除内联处理程序，并使用事件委托：

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

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

1 个答案: