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

假设你要动态地添加到HTML菜单，在菜单HTML将看起来像那么：如何将事件添加到刚刚添加的jQuery元素？

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

，每个元素都有被绑定了一个“click”事件。如何使用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>");

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

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

我希望了解如何用jQuery解决这个问题。如果可能的话，我宁愿不干扰我的ID命名空间。

编辑：

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

的< UL>不存在下手。
从MENU_ITEM
信息是在函数使用（即.live（ '点击'，函数（E）{/ * do_something_with ... */MENU_ITEM [ '信息']}）。

来源

2009-09-08 Brian M. Hunt

假设：

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

来源

2009-09-08 00:39:28 cletus

.live（）很好，但对于某些事情livequery插件更好。偷他们的页面，你可以做一些

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

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

来源

2009-09-08 00:42:28 stimms

我假设你的意思是“.menu”;） - 对不起，我很讽刺。使用这种方法菜单“点击”将触发该元素内的任何位置，点击是必需的/ li元素 – 2009-09-09 09:47:14

我使用相同的选择器作为原始问题 – stimms 2009-09-09 11:34:06

您可以使用事件委派。因此，UL家长有一个点击事件，然后你只要看看得到什么点击 - 假设有一类“菜单中的”一个div包含UL：

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

你没有的大规模的一堆这样事件挂在身边，只是一个:)

来源

2009-09-08 14:01:08

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

回答

相关问题