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

onclick event for button inside dynamic li tag is not defined

本文关键字：onclick 事件按钮动态 li 标签未定义更新时间：2023-09-26

我试图调用按钮onClick事件函数，该函数存在于li标签内，但输出是 - 引用错误：未定义函数名称（删除用户）？

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