0

我的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>

什么是正确的 jqueryish 方式来跟踪这些 LI 的点击。我想提取单击元素的数据 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 保持唯一。当然我可以像在“two-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"));
        });
    });
});
4

1 回答 1

0

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

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

顺便说一句，有几个开箱即用的插件可以满足您的需要，以防万一您不想构建自己的插件，例如YUI Treeview或我写的那个。

于 2012-07-10T18:35:10.683 回答