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>

これらのLIのクリックを追跡する適切なjqueryishの方法は何ですか? クリックされた要素の data-id を抽出し、2 つ目の API 呼び出しを行って、ツリーのパート 2 を構築したいと考えています。たとえば、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 をそれぞれ一意に保つ方法を考えるのに苦労しています。確かに「2-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"));
        });
    });
});
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 に答える