Question

我的DOM如下

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

我在页面底部的jQuery中的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方法是什么。我想提取被点击元素的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都是唯一的。当然我可以像“两个1”那样做“LEVEL-ID”，但我觉得这是hackish而不是正确的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。

jQuery - 构建树样式列表

1 个答案: