Javascript 我应该把这个函数放在代码的什么地方？jQuery

好的，对于课堂，我必须做一个CRUD应用程序。我必须有一个导航栏，链接到使用server.js文件加载的不同“页面”。在该服务器中，我加载一个JSON文件，其中包含两个数组，一个用于页面或节，另一个用于用户。目标是在一个部分中输入有关用户的信息，点击一个按钮，然后该用户的信息将在另一个部分中列出。您还需要能够随意删除每个用户，并且都是本地用户

我的问题是我有这个addUser函数，在这个函数中有一个add按钮的click监听器。现在，当它应该被点击时，它所做的唯一一件事就是抛出一个console.log，但我无法让它工作。addUser函数还有一个console.log，运行良好，我认为我的问题是我不知道应该在哪里将addUser函数添加到代码中。为了安全起见，我会继续列出我所有的代码。首先是server.js：

 var SERVER = (function(){
    //variable to store data.users into
    var _userData = [];
    var _sectionData = [];

    //getting the data and putting it into the variables above
    var _loadData = function(){
        $.getJSON("./data/data.json", function(data){
             _userData = data.Users;
             _sectionData = data.Sections;

             //console.log(_sectionData);
        })
    }

    var _showData = function(){
        return _userData;
    }

    var _getSection = function(sectionYouWant){
        let sec = {};
        $.each(_sectionData, function(idx, section){
            if(section.sectionName == sectionYouWant){
                sec = section.sectionContent;
            }
        });
        return sec;
    }

    _loadData();

    return {
        loadData: _loadData,
        showData: _showData,
        getSection: _getSection
    }
})()

接下来是app.js

    function addUser(){
    console.log("firing addUser");

    $('#addButton').click(function(e){
        console.log("are you working????")
        e.preventDefault();
    })
}

function initNavListeners(){
    $("#home").click(function(e){
        //console.log('click home');
        var sectionData = SERVER.getSection('home');
        $('.wrapper').html(sectionData);
    });

    $("#view").click(function(){
        //console.log('click view users');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('view');

        $(".wrapper").html(sectionData);

        function showUsers(){
            $.each(userData, function(idx, user){
                $(".wrapper").append(`
                <br/><p><b>Name:</b> ${user.fName} ${user.lName}</p>

                <p><b>Email Address:</b>
                ${user.email}</p>

                <p><b>Twitter Handle:</b>
                ${user.twitter}</p>

                <button class="delete" id=${idx}>DELETE</button><br/>`)
            })
        }

        showUsers();

    });

    $("#register").click(function(e){
        //console.log('click register');
        addUser();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);
    });
}

$(document).ready(function(){
    SERVER.loadData();
    initNavListeners();

    var sectionData = SERVER.getSection('home');
    $('.wrapper').html(sectionData);
})

函数addUser（）{
console.log（“启动addUser”）；
$（“#添加按钮”）。单击（函数（e）{
日志（“你在工作吗？”）
e、 预防默认值（）；
})
}
函数initNavListeners（）{
$（“#主页”）。单击（功能（e）{
//console.log（'clickhome'）；
var sectionData=SERVER.getSection（'home'）；
$（'.wrapper'）.html（sectionData）；
});
$（“#视图”）。单击（函数（）{
//console.log（'click view users'）；
var userData=SERVER.showData（）；
var sectionData=SERVER.getSection（'view'）；
$（“.wrapper”）.html（sectionData）；
函数showUsers（）{
$.each（用户数据，函数（idx，用户）{
$（“.wrapper”）.append(`

名称：${user.fName}${user.lName}

电邮地址：
${user.email}

推特句柄：
${user.twitter}

删除
`）
})
}
showUsers（）；
});
$（“#注册”）。单击（功能（e）{
//console.log（'click register'）；
addUser（）；
var sectionData=SERVER.getSection（'register'）；
$（'.wrapper'）.html（sectionData）；
});
}
$（文档）.ready（函数（）{
loadData（）；
initNavListeners（）；
var sectionData=SERVER.getSection（'home'）；
$（'.wrapper'）.html（sectionData）；
})

最后，JSON：

    {
    "Users": [
        {
            "fName": "Andrea",
            "lName": "Trigg",
            "email": "at@users.com",
            "twitter": "@at"
        }
    ],
    "Sections": [
        {
            "sectionName": "home",
            "sectionContent": "<h1>HOME</h1><p>Welcome to the home page for my Homework 5 assignment! In this little application, you can register users and it will be submitted to a local JSON file. Then when you go to the view users page, it will show all the current users registered. You can also delete each individual user by pressing the \"delete user\" button below their information.</p><p>I hope this will work on your machine because it definitely works on mine!</p><p>I'm honestly not sure what else I should put here, so have a gif of a cute kitten trying to eat their own tail.</p><img src=\"https://i.pinimg.com/originals/84/c8/ba/84c8bab01787f2ee1ebef1378e9e8444.gif\"><p>I hope you have a great week! Thank you for taking a look at my Homework 5!</p>"
        },
        {
            "sectionName": "view",
            "sectionContent": "<h1>VIEW USERS</h1><p>Scroll below to see all users stored in the database. Click the delete button to delete a user from the database (careful, you won't get the information back if you delete!)</p>"
        },
        {
            "sectionName": "register",
            "sectionContent": "<h1>REGISTER</h1><p>Register a new user by using the form below!</p><form><input id=\"first\" type=\"text\" value=\"\" placeholder=\"First Name:\"><br/><input id=\"last\" type=\"text\" value=\"\" placeholder=\"Last Name:\"><br/><input id=\"emailAddress\" type=\"text\" value=\"\" placeholder=\"Email:\"><br/><input id=\"twitterHandle\" type=\"text\" value=\"\" placeholder=\"Twitter Handle\"><br/><input id=\"addButton\" type=\"button\" value=\"SUBMIT\"></form>"
        }
    ]
}

{
“用户”：[
{
“fName”：“Andrea”，
“lName”：“Trigg”，
“电子邮件”：at@users.com",
“推特”：“@at”
}
],
“章节”：[
{
“sectionName”：“主页”，
“sectionContent:“HOME欢迎访问我的家庭作业5作业的主页！在这个小应用程序中，您可以注册用户并将其提交到本地JSON文件。然后，当您转到查看用户页面时，它将显示所有当前注册的用户。您还可以通过按\“删除用户”来删除每个用户\“按钮在他们的信息下方。
我希望这能在你的机器上工作，因为它肯定能在我的机器上工作！
我真的不确定我还应该在这里放什么，所以请看一张可爱的小猫试图吃掉自己尾巴的gif。
我希望你这一周过得愉快！谢谢你看我的作业5！
”
},
{
“sectionName”：“视图”，
“sectionContent”：“查看用户在下面滚动以查看存储在数据库中的所有用户。单击“删除”按钮可从数据库中删除用户（小心，如果删除，您将无法恢复信息！）
”
},
{
“sectionName”：“register”，
“sectionContent”：“注册使用以下表单注册新用户！






}
]
}

---

如果您看到任何可能导致我的click listener在函数本身运行时无法工作的情况，那将是一个巨大的帮助。我真的很难做到这一点，所以任何帮助都将是非常好的！谢谢！

哇，好吧，在做了三个小时之后，我终于找到了答案

因此，基本上，您使用addUser函数，将其放入initNavListener中的#register click listener，而不是全局函数。它应该如下所示：

$("#register").click(function(e){
        //initListeners();
        //console.log('click register');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);

        function addUser(){
            console.log("firing addUser");

            $('#addButton').click(function(e){
                console.log("are you working????")
                e.preventDefault(); )}

我觉得自己现在是最大的白痴：'D'

---

ETA：如果有人想帮我弄清楚如何删除这些用户，那就太酷了，但这并不是我需要做的事情，所以我不会把重点放在it atm上。

哇，好吧，在做了三个小时之后，我终于弄明白了

因此，基本上，您使用addUser函数，将其放入initNavListener中的#register click listener，而不是全局函数。它应该如下所示：

$("#register").click(function(e){
        //initListeners();
        //console.log('click register');
        var userData = SERVER.showData();
        var sectionData = SERVER.getSection('register');
        $('.wrapper').html(sectionData);

        function addUser(){
            console.log("firing addUser");

            $('#addButton').click(function(e){
                console.log("are you working????")
                e.preventDefault(); )}

我觉得自己现在是最大的白痴：'D'

---

ETA：如果有人想帮我弄清楚如何删除这些用户，那就太酷了，但这并不是我需要做的事情，所以我没有把重点放在it atm上。

我还没有时间完成所有的逻辑，但你正在

addUser

函数中添加事件侦听器，该函数出现在当单击register按钮时，将调用该函数。因此，假设您没有单击register“然而，这就是为什么“添加”按钮不起作用的原因。在另一个事件处理程序中添加一个事件监听器几乎总是一种反模式——最终可能会为同一事件加载相同的处理程序，这通常会导致问题。除了极少数例外，事件监听器应该在页面加载时或创建元素时创建一次。我还没有时间研究所有逻辑，但您正在将该事件监听器添加到

addUser

函数中，该函数似乎仅在单击register按钮时调用。所以假设你