jQuery -构建树样式列表

Question

我的DOM如下

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

我在页面底部a中的jQuery是：

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

这个脚本进入数据库并输出原始的LIs。在此运行之后，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方法是什么？我想提取被单击元素的data-id，并进行第二个API调用来构造树的第二部分。例如，如果单击data-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是唯一的。当然我可以做"LEVEL-ID“，就像在"two-1”中一样，但我觉得这太黑客了，而且不是正确的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"));
        });
    });
});

Answer 1

通过li#Browse委托事件，并相对于事件的上下文元素引用data-id属性。

$('#Browse').on('click', 'li', function(evt) {
    alert($(this).data('id'));
});

顺便说一句，有几个开箱即用的插件可以做你需要的事情，以防你不想构建自己的插件，例如YUI Treeview或one I wrote。