jquery - 如何向刚刚添加的 jQuery 元素添加事件？

Question

假设您想动态添加到 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>");

不幸的是，这行不通，原因有两个(至少我知道):

1. 标签不能像这样用 jQuery 单独添加；和
2. .live() 元素仅匹配最近插入的元素。

我希望了解如何使用 jQuery 解决这一问题。如果可能的话，我希望在不弄乱我的 ID 命名空间的情况下执行此操作。

编辑:

两个说明(以防不明显):

1. < ul > 一开始就不存在。

2. 函数中使用来自 menu_item 的信息(即 .live('click', function(e) {/* do_something_with ... */menu_item['info'] } )。

Answer 1

假设:

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