Am trying to call a button onClick event function, which is present inside the li tag, but the output is - ReferenceError: function name (deleteUser) is not defined ?
$(document).ready(function(){
var baseUrl = 'http://localhost:9000/';
$('#btnUserList').click(function(){
$.post(baseUrl+'listUsers',function(data){
$(".listUl").empty();
for(var i in data){
$("#userRecord ul").append('<li><input type="text" size="8" value='+i+'>'+
'<input type="text" size="8" value='+data[i].firstName+'>'+
'<input type="text" size="8" value='+data[i].lastName+'>'+
'<input type="text" size="8" value='+data[i].username+'>'+
'<input type="text" size="8" value='+data[i].email+'>'+
'<input type="button" value="Delete" onClick="deleteUser('+data[i].username+')"></li>');
}
});
});
function deleteUser(username){
alert(name);
$.post(baseUrl+'deleteUser',username,function(result){
if(result == 'yes'){
$('#btnUserList').trigger("click");
alert('User Deleted');
}
});
}
});
The function deleteUser
is defined inside the document.ready
handler, which means it's not in the global scope. You have to define it outside the document.ready
handler
$(document).ready(function() {
var baseUrl = 'http://localhost:9000/';
$('#btnUserList').click(function() {
$.post(baseUrl + 'listUsers', function(data) {
$(".listUl").empty();
for (var i in data) {
$("#userRecord ul").append('<li><input type="text" size="8" value=' + i + '>' +
'<input type="text" size="8" value=' + data[i].firstName + '>' +
'<input type="text" size="8" value=' + data[i].lastName + '>' +
'<input type="text" size="8" value=' + data[i].username + '>' +
'<input type="text" size="8" value=' + data[i].email + '>' +
'<input type="button" value="Delete" onClick="deleteUser(' + data[i].username + ')"></li>');
}
});
});
});
function deleteUser(username) {
alert(name);
$.post(baseUrl + 'deleteUser', username, function(result) {
if (result == 'yes') {
$('#btnUserList').trigger("click");
alert('User Deleted');
}
});
}
Or you could create the elements with jQuery instead
$(document).ready(function() {
var baseUrl = 'http://localhost:9000/';
$('#btnUserList').click(function() {
$.post(baseUrl + 'listUsers', function(data) {
$(".listUl").empty();
$.each(data, function(index, item) {
$("#userRecord ul").append(
$('<li />').append(
$('<input />', {text : 'text', size : '8', value : index}),
$('<input />', {text : 'text', size : '8', value : item.firstName}),
$('<input />', {text : 'text', size : '8', value : item.lastName}),
$('<input />', {text : 'text', size : '8', value : item.username}),
$('<input />', {text : 'text', size : '8', value : item.email}),
$('<input />', {
type : 'button',
value : 'Delete',
on : {
click : function() {
$.post(baseUrl + 'deleteUser', item.username, function(result) {
if (result == 'yes') {
$('#btnUserList').trigger("click");
alert('User Deleted');
}
});
}
}
})
)
)
});
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.