javascript - JQuery 动态添加回调

Question

我有一个问题。我正在尝试将菜单元素动态添加到我的网页。这个问题是我通过回调处理页面导航。对于我现在使用的代码，只有数组的最后一个元素是可用的。我不确定为什么会这样，但我希望在这里得到一些帮助。我还提供了一个 jsfiddle 页面，以便您可以看到发生了什么。

代码:https://jsfiddle.net/usz2nvqw/

HTML:
<div id='page_nav'>
    <!-- Navigation Elements -->
</div>


JAVASCRIPT:
var pages = {

    "home": {
        "resource_name": "Home",
        "name": "Home Page",
        "header": "Featured"
    },

    "catalogue": {
        "resource_name": "Browse",
        "name": "Browse Catalogue",
        "header": "Public Catalogue"
    }

};


$(document).ready(function () {
    for (var key in pages) {
        if (pages.hasOwnProperty(key)) {
            //Add a new link for the Menu Navigation Element
            document.getElementById('page_nav').innerHTML += "<a id='nav_" +     key + "'>" 
            + pages[key].name + "</a><br /><br />";

            //Create a new callback for the Menu Navigation Element
            $('#nav_' + key).click(createCallBack(key));
        }
    }

});

//Function for returning a callback
function createCallBack(key) {
    return function () {
        alert("Callback fired");
    }
}

Answer 1

如果用 jQuery 替换链接创建，它就可以工作

$(document).ready(function () {
    for (var key in pages) {
        if (pages.hasOwnProperty(key)) {

            $('#page_nav').append($('<a />', {
                id: 'nav_' + key
            }).text(pages[key].name))
                .append($('<br />'))
                .append($('<br />'));

            //Create a new callback for the Menu Navigation Element
            $('#nav_' + key).click(createCallBack(key));
        }
    }

});

https://jsfiddle.net/usz2nvqw/1/

或者，如果您希望使用纯 JavaScript 进行创建

$(document).ready(function () {
    document.getElementById('page_nav').innerHTML = '';
    for (var key in pages) {
        if (pages.hasOwnProperty(key)) {
            //Add a new link for the Menu Navigation Element
            var nav = document.createElement("A");
            nav.id = "nav_" + key;
            var text = document.createTextNode(pages[key].name);
            nav.appendChild(text);
            document.getElementById('page_nav').appendChild(nav)
            //Create a new callback for the Menu Navigation Element
            $('#nav_' + key).click(createCallBack(key));
        }
    }

});

使用innerHTML似乎有问题，如果您在尝试添加第一个点击处理程序之前记录$('#nav_' + key)，您将看到它还不存在