此页面的想法是从我的 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>')
})
}
});
}
});
最佳答案
您的 deleteMe
不在顶层 - 它在您的 $( document ).ready( () => {
中,所以它不是全局变量,所以内联处理程序 onclick="deleteMe('+skill.id+')"
失败。(内联处理程序只能在顶层引用全局变量。)
虽然您可以通过将 deleteMe
移到外部来修复它,但内联处理程序是不好的做法;考虑改为使用 Javascript 正确附加事件监听器。删除内联处理程序,并使用事件委托(delegate):
$('#listFiles').on('click', 'button[name="deletebtn"]', function() {
deleteMe(this.dataset.id);
});
关于javascript - 尝试动态创建删除按钮并在javascript中调用删除功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56283782/