該函數在我的代碼中放在哪里？ jQuery的

Question

好的，因此對於班級，我基本上必須創建一個CRUD應用程序。 我必須有一個導航欄，該導航欄鏈接到使用server.js文件加載的不同“頁面”。 在該服務器上，我加載了一個JSON文件，其中包含兩個數組，一個數組用於頁面或部分，另一個數組用於用戶。 目標是在一個部分中輸入有關用戶的信息，單擊按鈕，然后該用戶的信息將在另一部分中列出。 您還需要能夠隨意刪除每個用戶，而且這些操作都是本地的。

我的問題是我有此addUser函數，並且在此函數中有一個Add按鈕的單擊偵聽器。 現在，它應該被單擊的唯一操作是拋出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);
})

最后，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>"
        }
    ]
}

如果您發現在功能本身處於運行狀態時可能導致我的點擊偵聽器無法正常工作的任何功能，那將是巨大的幫助。 我真的為此感到掙扎，所以任何幫助都會很棒！ 謝謝！

Answer 1

哇好吧，經過三個小時的研究，我終於明白了。

因此，基本上，您需要使用addUser函數，而不是將其設置為全局函數，而是將其放入initNavListener中的#register Click偵聽器中。 它看起來應該像這樣：

$("#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：如果有人想幫助我找出如何刪除這些用戶的方法，那很酷，但是未將其列為我需要做的事情，因此，我不在此重點介紹atm。