如何獲取動態構建的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(); 
       } 
       } 
      ); 
     } 
    } 

    });