假设您要动态添加到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/