假设您要动态添加到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名称空间。

编辑:

有两种说明(以防万一):


    开头不存在。
    来自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/

10-12 12:18
查看更多