Question

假设您要动态添加到HTML菜单，其中菜单HTML将如此：

<ul>
<li><a href="#">item-1</a>
<li><a href="#">item-2</a>
</ul>

每个元素都有一个绑定到它的“click”事件。如何使用jQuery动态创建它？

我想要的是相当于以下内容（假设的menu_item对象数组带有'title'）：

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

不幸的是，这不会有两个原因（至少，我知道）：

标签不能像jQuery一样单独添加;和
.live（）元素仅匹配插入的最新元素。

我很欣赏有关如何使用jQuery解决此问题的见解。如果可能的话，我宁愿这样做而不会弄乱我的ID命名空间。

修改：

两个澄清（如果不明显）：

＆lt; ul＆gt;从一开始就不存在。
来自menu_item的信息在函数中使用（即.live（'click'，function（e）{/ * do_something_with ... * / menu_item ['info']}）。
< / LI>

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

Answer 2

您可以使用事件委派。所以UL父级有一个点击事件，然后你只看一下被点击的内容 - 假设一个带有类“菜单”的div包含UL：

jQuery('div.menu').click(function(e){
    if (jQuery(e.target).is('li')){
        // LI was clicked
        return false;
    }
}

这样你就没有大量的活动，只有一个：）

Answer 3

.live（）很棒，但有些事情livequery插件更好。你可以从他们的页面偷一点

  $('menu') 
    .livequery('click', function(event) { 
        alert('clicked'); 
        return false; 
    });

将绑定到所有当前和所有未来的菜单项。

如何将事件添加到刚添加的jQuery元素？

3 个答案: