假设您想动态添加到 HTML 菜单,菜单 HTML 看起来像这样:
<ul>
<li><a href="#">item-1</a>
<li><a href="#">item-2</a>
</ul>
每个元素都有一个与其绑定(bind)的“点击”事件。如何使用 jQuery 动态创建它?
我想要的是与以下内容等效的内容(假设带有“标题”的对象的 menu_item 数组):
$('menu').append("<ul>");
for (var index in menu_items) {
$('menu').append("<li><a href='#'>"+menu_item['title']+"</a>")
.live("click", function(e) { /* Event Handler */ });
}
$('menu').append("</ul>");
不幸的是,这行不通,原因有两个(至少我知道):
- .live() 元素仅匹配最近插入的元素。
我希望了解如何使用 jQuery 解决这一问题。如果可能的话,我希望在不弄乱我的 ID 命名空间的情况下执行此操作。
编辑:
两个说明(以防不明显):
< ul > 一开始就不存在。
函数中使用来自 menu_item 的信息(即 .live('click', function(e) {/* do_something_with ... */menu_item['info'] } )。
里>
最佳答案
假设:
<ul class="menu">
<li><a href="#">item-1</a>
<li><a href="#">item-2</a>
</ul>
就这样做:
$(function() {
$("ul.menu a").live("click", function(e) {
// do stuff
});
});
然后其他地方:
var ul = $("<ul></ul>");
for (var index in menu_items) {
var a = $("<a></a>").text(menu_item["title"]).attr("href", "#");
$("<li></li>").append(a).appendTo(ul);
}
$("...").append(ul);
关于jquery - 如何向刚刚添加的 jQuery 元素添加事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1391421/