动态li标记内的按钮的onclick事件未定义

Question

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');
                }
            }); 
        }
});

Answer 1

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');
                                        }
                                    });
                                }
                            }
                        })
                    )
                )
            });
        });
    });
});