JQuery 动态添加回调

JQuery Dynamically add a callback

我有一个问题。我正在尝试将菜单元素动态添加到我的网页。这个问题是我正在通过回调处理页面导航。使用我现在正在使用的代码,只有数组的最后一个元素是有效的。我不确定这是为什么,但我希望在这里得到一些帮助。我还提供了一个 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");
    }
}

如果您用 jQuery 替换您的 link 创建的作品

$(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),您将看到它尚不存在

$(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(function(event){
                  // here your code
            });
        }
    }

});