javascript - 将事件监听器(在回调函数中)添加到生成的元素

Question

我的目标 - 我想在没有 jQuery 的情况下做到这一点:

1. 从 JSON 文件检索数据 (ajax GET)
2. 使用其中的数据生成链接列表
3. 当点击其中一个链接时，获取其 id 的值(或者可能是另一个属性)，用它加载相应的数据(来自同一个 JSON 文件，也通过 ajax GET)

重写此代码以使用回调后，我将获取 JSON 数据并创建链接。但是，我对有关 addEventListener 如何工作的两件事感到困惑:首先，为什么在 for 循环中添加事件监听器时会调用 showProj 函数(到目前为止) ，仅提醒每个链接的 id)？其次，为什么链接之后不响应点击？我认为添加事件监听器只会使生成的链接可点击？

function ajaxReq() {
    var request = new XMLHttpRequest();
    return request;
}

function getJsonData(makeLinks) { // makeLinks = the callback
    var request = ajaxReq();
    request.open("GET", "/json/projects.json", true);
    request.setRequestHeader("content-type", "application/json");
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                makeLinks(request.responseText);
            }
        }
    } // onreadystatechange
} // getJsonData

getJsonData(makeLinks);

function makeLinks(result) { // result = request.responseText
    var projects = JSON.parse(result);
    var projects = projects["Projects"];
    var projectList = document.getElementById("project-list"); // ul#project-list
    for (var project in projects) {
        var projectId = projects[project].id;
        var listItem = "<li><a class=\"project-link\" id=\""+projects[project].project+"\" href=\"#\">" + projects[project].project + "</a></li>";
        projectList.innerHTML += listItem;
    }

    var projLink = document.getElementsByClassName("project-link");
    for (var i = 0; i < projLink.length; i++) {
        var projId = projLink[i].id;
        projLink[i].addEventListener("click", showProject(projId), false); // ** ?? **
    }
} // makeLinks

function showProject(projId) {
    /*
        function showProject will load data corresponding to the link's id (or another attribute);
        presently there are only alerts until the links are working
    */
    alert("projId is: " + projId);
} // showProject

同样，我最终想要的只是单击 .project-link 类链接，获取其 id(或其他一些属性)，然后加载相应的数据，例如(伪代码):

projLink.onclick = function(){
    var projId = this.id;
    showProject(projId);
}

...我意识到我可以用这个做到这一点:

$(document).ready(function() {
    $("#project-list").on("click", 'li a', function() {
        var projId = this.id;
        showProject(projId);
    })
})

...但我想知道为什么事件监听器一开始就不起作用(即没有 jQuery 位)。

最后:在这种情况下，通过全局定义 var projLink 来排除范围问题，这样我就不必重新定义它，例如在 showProj 内部，是否会被认为是邪恶的不良做法？

提前非常感谢您的任何更正、建议和见解。

Answer 1

您说得对，var projLink 的作用域为 makeLinks() 函数，但更重要的是它也在 Ajax 回调内部，这是一个单独的异步范围。

当 Ajax 代码异步运行时，其余 JS 也会继续运行。因此，如果您还调用另一个函数 getElementsByClassName("project-link")，很可能还没有任何函数，因为 Ajax 回调尚未完成其工作。

可能的选项包括:

1. 将 Ajax request.onreadystatechange() 中的所有内容放入 makeLinks() 中(并不理想)
2. 调整代码以使用单独的回调函数，并将 JSON 数据传递给它。在尝试对其采取行动之前，您可能必须搞乱超时和检查，以确保数据已定义并完整。

看看this previous question关于 Ajax 响应。