如何获取动态构建的JQuery TreeView中的clicked元素？

Question

我有一个包含多个产品类别的产品数据库。每个类别都有一些子类别，其中有子子类别，这些子类别...呃，相当深一些。该树太大而无法立即加载，因此我需要在用户选择特定产品类别时动态构建它。这是产品树的快照。最初，只有第一级被加载。当用户点击猫时添加第二级（Cat.1.1和Cat.1.2）。 1：

<ul id="navigation"> 
    <li id="625212">Product cat. 1 
     <ul> 
     <li id="625213">Product cat. 1.1 
      <ul></ul> 
     </li> 
     <li id="625109">Product cat. 1.2 
      <ul></ul> 
     </li> 
     </ul> 
    </li> 
    <li id="624990">Product cat. 2 
     <ul></ul> 
    </li> 
</ul> 

我打算在用户点击特定产品类别时扩展树。我可以从一个URL中获取子类别的列表，它将父类产品类别ID作为输入，并以treeview所需的格式输出HTML。我无法使用PHP，必须使用.click（）事件才能使用此功能。这里是我有的代码：

$(document).ready(function(){ 

    function doSomethingWithData(htmldata, id) { 
     var branches = $(htmldata).appendTo("#navigation #"+id+" ul"); 
     $("#navigation").treeview({ add: branches }); 
    } 

    $("#navigation").treeview({ 
     collapsed: true, 
     unique: true, 
     persist: "location" 
    }); 

    $("#navigation li[id]").click(function() { 
     var id=$(this).attr("id"); 
     if ($("#"+$(this).attr("id")+" ul li").size()==0) { 
     $.get('someurl?id='+$(this).attr("id"), 
      function(data) { doSomethingWithData(data, id); }) 
     } 
    }); 

}); 

我遇到的问题是与点击事件。当点击猫1.1。将其扩展到更深一级，它仍会返回顶级产品类别的ID。

如何更改点击事件，以便它将返回点击的<LI>的ID而不是顶级ID？

如果产品类别没有任何子类别，我该如何删除<UL></UL>并因此指出该树无法进一步扩展？

Answer 1

要只返回一个LI，我认为你必须使用下面的代码。这只会匹配UL的孩子，这是您点击的LI。

$('#navigation ul > li').click(function() { 
     alert($(this).attr('id')); 
}); 

要取消UL，你能检查是否有任何东西在$ .get中返回吗？所以我想你点击功能会是这个样子：

更新 - 这将选择甚至顶立：

$('#navigation').click(function(e) { 

    var element = $(e.target); 
    if (element.context.nodeName === 'LI') 
    { 
     var id = element.attr('id'); 
     if ($('#' + id + ' ul li').size()==0) 
     { 
      $.get('someurl?id='+ id, 
       function(data) 
       { 
       // data could = undefined or something else, just check what 
       // it looks like when it comes through empty and match that 
       if (data != null) 
       { 
        doSomethingWithData(data, id); 
       }  
       else 
       { 
        $('#' + id).children('ul').remove(); 
       } 
       } 
      ); 
     } 
    } 

    });