jQuery-构建一个树样式列表

我的DOM如下

<ul>
    <li id="Browse">
        Browse
        <ul id="browse-one">
        </ul>
    </li>
</ul>

页面底部的jQuery是：

$("#Browse").click(function() {
     $("#browse-one").html('<div class="ui-widget">Loading...</div>');
     $("#browse-one").load('../api/browse.php?do=getFirst');
});

这个脚本进入数据库并吐出原始的LI。运行后，DOM被修改如下

<ul>
    <li id="Browse">
        Browse
        <ul id="browse-one">
            <li id="one-1" data-id="1">SOMETHING</li>
            <li id="one-2" data-id="2">SOMETHING</li>
            <li id="one-3" data-id="3">SOMETHING</li>
            <li id="one-4" data-id="4">SOMETHING</li>
            .
            .
            .
            <li id="one-N" data-id="N">SOMETHING</li>
        </ul>
    </li>
</ul>

跟踪这些LI上的点击量的合适的jqueryish方式是什么。我想提取点击的元素的数据id，并进行第二个API调用来构造树的第二部分。例如，如果单击了数据id="1"的LI，则DOM应为：

<ul>
    <li id="Browse">
        Browse
        <ul id="browse-one">
            <li id="one-1" data-id="1">SOMETHING
                <ul id="Something Here">
                    <li id="two-1" data-id="1">HMM</li>
                    <li id="two-2" data-id="2">HMM</li>
                    <li id="two-3" data-id="3">HMM</li>
                    .
                    .
                    .
                    <li id="two-M" data-id="M">HMM</li>     
                </ul>
            </li>
            <li id="one-2" data-id="2">SOMETHING</li>
            <li id="one-3" data-id="3">SOMETHING</li>
            <li id="one-4" data-id="4">SOMETHING</li>
            .
            .
            .
            <li id="one-N" data-id="N">SOMETHING</li>
        </ul>
    </li>
</ul>

我很难思考如何保持内部UL的每个ID的唯一性。当然，我可以像在"two-1"中那样做"LEVEL-ID"，但我觉得这很粗糙，不是合适的jquery方式。

编辑：

但现在我该如何跟踪孩子们的点击？？这似乎不正确，但我希望你能理解我为什么要做

$("#Browse").click(function() {
     $("#locations-browse").html('<div class="ui-widget">Loading...</div>');
     $("#locations-browse").load('../api/browse.php?do=getFirst');
     //Child is tracked
     $("#locations-browse").delegate("li","click",function(evt){
        var inner = $(this).append("<ul></ul>");
        inner.html('<div class="ui-widget">Loading...</div>');
        inner.load('../api/browse.php?do=getSecond');
        $(this).delegate("li","click", function(evt) {
            alert("Child ". $(this).data("id") . " is clicked";
        });
    });
});

编辑2:

嗯，这仍然不起作用：

$("#Browse").click(function() {
     $("#locations-browse").html('<div class="ui-widget">Loading...</div>');
     $("#locations-browse").load('../api/browse.php?do=getFirst');
     //Child is tracked
     $("#locations-browse").delegate("li","click",function(evt){
        $(this).append("<ul></ul>");
        $(this).children("ul").load('../api/browse.php?do=getSecond?location-id='.$(this).data("id"));
        $(this).delegate("li","click", function(evt) {
            alert($(this).data("id"));
        });
    });
});