[prog_f130]

Добрый день. Цель при клике по узлу дерева подгружать дочерние элементы.

При открытии страницы загружаются самые нижние узлы.
По такому принципу и

<ul id="n-ul-Top" class="TreeContainer">
  <li id="57fdd652c4a59fea5821da98" class="Node IsRoot">
    Theme 1
    <ul id="n-ul-57fdd652c4a59fea5821da98" class="TreeContainer"></ul>
  </li>
</ul>

На клик по li вешается обработчик.

(function($, undefined) {
    $(function(){
        $('li.Node').click(function(){
         
            var target_ul='#n-ul-'+$(this).attr("id");
            var url='/catalog/'+$(this).attr("id");
            console.log($(this).attr("id"));
            $.getJSON(url, function(data){
                data.forEach(function(item) {
                    $(target_ul).append('<li class="Node" id='+item._id+'>'+item.caption+'</li>');
                    
                    $('#'+item._id).append('<ul class="TreeContainer" id="n-ul-'+item._id+'">');
                });
            });
            return false;
        });
    });    
})(jQuery);

Проблема в том, что корректно добавляются только элементы в корневые узлы, которые были построены заранее, а при клике по дочерним, которые были динамически отрисованы операция повторяется для коренных узлов, т.е. console.log($(this).attr("id"));
в любом случае возвращает id коренного li, хотя если смотреть разметку id присвоены верно. ЧЯДНТ? Спасибо.

P.S. Только сейчас заметил, что есть отдельный раздел JQuery, сорян, что промахнулся.