jquery動態嵌套列表

Question

我敢肯定這很容易，但是我的頭靠在牆上。

我基本上是使用jQuery，JSON和PHP（基於此方法創建動態生成的瀏覽樹：http://www.electrictoolbox.com/json-data-jquery-php-mysql/）。我已將下拉框更改爲ul li菜單。在'a'點擊事件中，我查詢數據庫並返回下一組數據的值。這一切都工作。我只是無法讓新返回的列表在被點擊的li下「嵌套」。例如：

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

如果用戶點擊「狗」我的PHP/JSON事件查詢數據庫，並返回名單：

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

這工作，但我想在列表中顯示爲嵌套列表下的'狗'在頁面上。就像這樣：

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

我已經嘗試了各種辦法，但都不是工作。我確定有一個簡單的按鈕，我錯過了...任何援助將不勝感激。

jQuery的生成leveltwo列表如下：

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

這就要求在一級DIV項目被點擊時的功能：

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

國民黨

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