Javascript JQuery动态添加回调

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

代码：

HTML：
JAVASCRIPT:
变量页={
“家”：{
“资源名称”：“主页”，
“名称”：“主页”，
“标题”：“特色”
},
“目录”：{
“资源名称”：“浏览”，
“名称”：“浏览目录”，
“标题”：“公共目录”
}
};
$（文档）.ready（函数（）{
for（页面中的var键）{
if（第页hasOwnProperty（键））{
//为菜单导航元素添加新链接
document.getElementById（'page_nav'）。innerHTML+=“”
+页面[键]。名称+“

”；
//为菜单导航元素创建新的回调
$（'#导航'+key）。单击（createCallBack（key））；
}
}
});
//用于返回回调的函数
函数createCallBack（键）{
返回函数（）{
警报（“回调已触发”）；
}
}

如果将链接创建替换为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));
        }
    }

});

---

使用

innerHTML

似乎有问题，如果您在尝试添加第一个单击处理程序之前记录

$（'#nav'+key）

，您将看到它还不存在

，如果您用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));
        }
    }

});

$(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
            });
        }
    }

});

使用

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
            });
        }
    }

});

for（页面中的var键）{ if（第页hasOwnProperty（键））{ //为菜单导航元素添加新链接 document.getElementById（'page_nav'）。innerHTML+=“” +页面[键]。名称+“

”； //为菜单导航元素创建新的回调 $（导航键）。单击（函数（事件）{ //这是你的密码 }); } } });

$（文档）.就绪（函数（）{
for（页面中的var键）{
if（第页hasOwnProperty（键））{
//为菜单导航元素添加新链接
document.getElementById（'page_nav'）。innerHTML+=“”
+页面[键]。名称+“

”；
//为菜单导航元素创建新的回调
$（导航键）。单击（函数（事件）{
//这是你的密码
});
}
}
});

你可以找到为什么innerHTML不起作用的答案你可以找到为什么innerHTML不起作用的答案想法是添加一个动态回调，它不能完成比我已经做的更多的事情。想法是添加一个动态回调，它不能完成比我已经做的更多的事情。这让我感到好奇。你知道有什么文件可以解释为什么会这样吗？为什么我的最后一个元素总是能工作？”-在元素的innerHTML属性中添加一个字符串会破坏在该元素的后代上设置的所有事件处理程序。天哪！现在我知道了“-Sime Vidas Good to know:”）这让我很好奇。你知道有什么文件可以解释为什么会这样吗？为什么我的最后一个元素总是能工作？”-向元素的innerHTML属性添加一个字符串将销毁在该元素的后代上设置的所有事件处理程序。天哪！现在我知道了“-Sime Vidas Good know:）