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