如何將事件添加到剛剛添加的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元素？

回答

相關問題