[英]onclick event for button inside dynamic li tag is not defined
是否正在嘗試調用li標簽內的按鈕onClick事件函數,但輸出為-ReferenceError:未定義函數名(deleteUser)?
$(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');
}
});
}
});
函數deleteUser
是在document.ready
處理程序內定義的,這意味着它不在全局范圍內。 您必須在document.ready
處理程序之外定義它
$(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');
}
});
}
或者您可以使用jQuery創建元素
$(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');
}
});
}
}
})
)
)
});
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.