jQuery - les événements ne se déclenchent pas pour les éléments d'onglet créés dynamiquement

Question

J'utilise jQuery UI Tabs.

<div id="tabs"> 
<ul id="tablist"> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
</ul> 
</div> 

J'ai un bouton qui ajoute de nouveaux onglets. J'utilise le code suivant:

var newTabId = $('#tabs').tabs('option', 'selected') + 1;  
$('#tabs').tabs("add",'someUrl.htm','New Tab',newTabId); 

(Tab sera ajouté à côté de l'onglet sélectionné)

Maintenant, aucun des onglets récemment ajoutés le feu des événements comme un clic ou placez le curseur

$('#tablist li').click(function(){ 
    alert('test message'); 
}); 

Mais les événements se déclenchent correctement pour les onglets qui étaient présents dans le code source initial.

Comment résoudre?

Answer 1

Utilisez plutôt live.

$('#tablist li').live('click', function(){ 
    alert('test message'); 
}); 

Ou mieux encore, delegate l'événement

$('#tablist').delegate('li', 'click', function(){ 
    alert('test message'); 
}); 

Answer 2

Vous avez probablement besoin de lier l'élément à un événement lors de sa création, si elle est d'un intérêt .clone(true) clonerons un élément et le maintenir BIND avec un événement.