Comment ajouter un événement à un élément jQuery qui vient d'être ajouté?

Question

Supposons que vous voulez ajouter dynamiquement à un menu HTML, où le menu HTML ressemblera-so:

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

Et chaque élément a un événement « clic » lié par. Comment créer cela dynamiquement avec jQuery?

Qu'as Je voudrais est l'équivalent de ce qui suit (avec tableau de menu_item hypothétique d'objets avec « le titre de):

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

Malheureusement, cela ne fonctionnera pas pour deux raisons (au moins, que Je suis au courant):

1. balises
   ne peuvent pas être ajoutés séparément comme celui-ci avec jQuery; et
2. l'élément .live() correspond uniquement à l'élément inséré le plus récent.

J'aimerais savoir comment on pourrait résoudre ce problème avec jQuery. Je préférerais faire cela sans encombrer mon espace de noms, si c'est possible.

EDIT:

Deux précisions (dans le cas où il est pas évident):

1. Le < ul> n'existe pas pour commencer.

2. Informations menu_item est utilisé dans la fonction (c.-à-.live ('click', function (e) {/ * do_something_with ... */menu_item [ 'info']}).

Answer 1

En supposant

:

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

Il suffit de faire:

$(function() { 
    $("ul.menu a").live("click", function(e) { 
    // do stuff 
    }); 
}); 

puis ailleurs:

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

.live() est génial mais pour certaines choses le plugin livequery est meilleur. Stealing quelque peu de leur page, vous pouvez faire

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

qui se liera à tous les éléments de menu actuels et futurs.

Answer 3

Vous pouvez utiliser la délégation d'événement. Ainsi, le parent UL a un événement de clic, et vous regardez ce qui se est cliqué - en supposant une div avec un « menu » class contient l'UL:

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

De cette façon, vous n'avez pas un groupe massif de événements qui traînent, juste celui :)