jquery 동적 중첩 목록

Question

나는 이것이 쉽다는 것을 확신하지만, 벽에 머리를 치고있다.

저는 기본적으로 jQuery, JSON 및 PHP (이 접근법을 기반으로합니다 : http://www.electrictoolbox.com/json-data-jquery-php-mysql/)를 사용하여 동적으로 생성 된 탐색 트리를 만듭니다. 드롭 다운 상자를 ul li 메뉴로 변경했습니다. 'a'클릭 이벤트에서 데이터베이스를 쿼리하고 다음 데이터 집합의 값을 반환합니다. 이것은 모두 작동합니다. 클릭 한 li 아래에 새로 반환 된 목록을 "중첩"하는 데 문제가 있습니다. 예를 들어 사용자가 '개'내 PHP를 클릭

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

경우/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> 

이 작동을하지만, 나는 목록이로 표시 할 페이지의 '개'아래에 중첩 목록. 이와 같이 :

나는 다양한 접근법을 시도했지만 아무도 작동하지 않습니다. 나는 쉬운 버튼이 있다는 것을 확신한다 ... 나는 도움이되지 않을 것이다.

는

leveltwo 목록을 생성 할 수있는 jQuery를 아래입니다 :

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