jquery liste imbriquée dynamique

Question

Je suis sûr que c'est facile, mais je me casse la tête contre un mur.

Je crée fondamentalement un arbre de navigation généré dynamiquement en utilisant jQuery, JSON et PHP (basé sur cette approche: http://www.electrictoolbox.com/json-data-jquery-php-mysql/). J'ai changé les listes déroulantes en menus ul li. Dans l'événement "a" click, j'interroge la base de données et renvoie les valeurs de l'ensemble de données suivant. Tout cela fonctionne. J'ai juste du mal à faire "nicher" la liste nouvellement retournée sous le li qui a été cliqué. Par exemple:

<ul id='levelone'> 
<li><a id='cats' href='#'>Cats</a></li> 
<li><a id='dogs' href='#'>Dogs</a></li> 
<li><a id='fish' href='#'>Fish</a></li> 
</ul> 

Si l'utilisateur clique sur «les chiens de mon événement de PHP/JSON interroge la base de données et retourne la liste:

<ul id='leveltwo'> 
<li><a id='hounds' href='#'>Hounds</a></li> 
<li><a id='shepherds' href='#'>Shepherds</a></li> 
<li><a id='poodles' href='#'>Poodles</a></li> 
</ul> 

Cela fonctionne, mais je veux la liste pour afficher comme liste imbriquée sous «Chiens» sur la page. Comme ceci:

<ul id='levelone'> 
<li><a id='cats' href='#'>Cats</a></li> 
<li><a id='dogs' href='#'>Dogs</a></li> 
    <ul id='leveltwo'> 
     <li><a id='hounds' href='#'>Hounds</a></li> 
     <li><a id='shepherds' href='#'>Shepherds</a></li> 
     <li><a id='poodles' href='#'>Poodles</a></li> 
    </ul> 
<li><a id='fish' href='#'>Fish</a></li> 
</ul> 

J'ai essayé une variété d'approches, mais aucun ne fonctionnent. Je suis sûr qu'il y a un bouton facile qui me manque ... Toute aide serait appréciée.

Le jQuery pour générer la liste leveltwo est ci-dessous:

function populateAmimalSubcategory() { 
    $.getJSON('./includes/browsedata/animalsubcat.php', { animalcategory:  
     $('#ucHidden').val() }, function (data) { 
     $("#animalsubcat").append("<ul id='subcatlist'></ul>"); 
     $.each(data, function (val, text) { 
     $("#subcatlist").append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>"); 
     }); 
    }); 

Cela appelle la fonction lorsqu'un élément du niveau un div est cliqué:

$('#animallist a').live('click', function(){ 
     document.getElementById('ucHidden').value = this.id; 
     $('#animalsubcat').empty(); 
     populateAnimalSubcategory(); 
    }); 

KMT

Answer 1

$('body').on('click', "#animallist > li > a", function(){ 
    var myli = $(this).parent(); 
    $('.animalsubcat', myli).remove(); 
    populateAnimalSubcategory(myli); 
}); 

function populateAmimalSubcategory(myli) { 
    $.getJSON('./includes/browsedata/animalsubcat.php', { 
     animalcategory: $('#ucHidden').val() 
    }, function (data) { 
     $(myli).append("<ul class='animalsubcat'></ul>"); 
     $.each(data, function (val, text) { 
      $(".animalsubcat", myli).append("<li><a href='#' id='" + this.use_subcategory + "'>" + this.use_subcategory + "</a></li>"); 
     }); 
    }); 
}