1

次のコードを使用してjQueryツリースタイルリストを作成しています。各API呼び出し（最後を除く）は、次のようにN個のLIを吐き出します。最後は私が別のdivに入れるためのテーブルを吐き出します。

<li><a data-category="SOMECATEGORY" data-id="SOME ID">SOMETHING</a><ul><!-- AJAX --></ul></li>

ツリーをナビゲートしている間、次のことが起こります。

  • 参照をクリックします-1つのHTTPリクエストを../api/browse.php?do=getLocations
  • 場所の1つがクリックされます-1つのHTTPリクエストから../api/browse.php?do=getFloors&location-id=ID_OF_JUST_CLICKED
  • フロアの1つがクリックされます-1つのHTTPリクエストが../api/browse.php?do=getEquipment&floor-id=ID_OF_JUST_CLICKED
  • 機器の1つがクリックされます-2つのHTTPリクエストが../api/browse.php?do=buildTables&location_id=' + browseList['location_id'] + '&floor_id=' + browseList['floor_id'] + '&device_type=' + browseList['device_type']

奇妙なことに、ラストクリックイベントが2回発生しています。警告ボックスには、2回ヒットしたのと同じオブジェクトが表示されます。これは、最後の要素でのみ発生します。機器の数に関係なく発生します。

    var browseList = [];
$("#Browse").click(buildBrowseMenus);

function buildBrowseMenus() {

    if(!this.isOpen) {
     this.isOpen = true;

     $child = $(this).parent().children("ul");

     $child.html('<div class="ui-widget">Loading...</div>');

     //Determine which category we are on.  If we know what category type is clicked
     // We will know which API call to make as the list goes:
     // Browse -> Locations -> Floors -> Equipment Type -> location number

     var category = $(this).data("category");
     switch (category) {

        //First list level, build out the locations
        case undefined:
            $child.load('../api/browse.php?do=getLocations');
        break;

        //Second list level, build out the floors for a given location
        case 'locations':
            browseList['location_id'] = $(this).data("id");
            $child.load('../api/browse.php?do=getFloors&location-id=' + $(this).data("id"));
        break;

        //Third list level, build out the Equipment for a given floor
        case 'floors':
            browseList['floor_id'] = $(this).data("id");
            $child.load('../api/browse.php?do=getEquipment&floor-id=' + $(this).data("id"));
        break;

        //If one of the pieces of equipment is clicked build the main tables
        case 'equipment':
            alert(JSON.stringify(this));
            browseList['device_type'] = $(this).data("id");
            $child.html('');
            $("#listStuffBody").load('../api/browse.php?do=buildTables&location_id=' + browseList['location_id'] + '&floor_id=' + browseList['floor_id'] + '&device_type=' + browseList['device_type']);
            return;
        break;
     }

     $child.delegate("a","click",buildBrowseMenus);

    }else{
      var $child = $(this).parent().children("ul");
      $child.html('');
      this.isOpen = false;

    }
}

どうした？ラストクリックは1回だけ起動する必要があります。

編集:::(参照->場所1->1階->車）をクリックすると、DOMは次のようになります。

<li>
    <a id="Browse">Browse</a>
    <ul>
        <li>
        <a data-id="2" data-category="locations">LOCATION 1</a>
        <ul>
            <li>
            <a data-id="2" data-category="floors">First Floor</a>
            <ul>
                <li>
                <a data-id="truck" data-category="equipment">truck</a>
                <ul><!-- -- AJAX ----></ul>
                </li>

                <li>
                <a data-id="car" data-category="equipment">car</a>
                <ul><div class="ui-widget">Loading...</div></ul>
                </li>

                <li><a data-id="boat" data-category="equipment">voat</a>
                <ul><!-- -- AJAX ----></ul>
                </li>
            </ul>
            </li>
        </ul>
        </li>

        <li>
        <a data-id="1" data-category="locations">Location 2</a>
        <ul><!-- -- AJAX ----></ul>
        </li>
    </ul>
</li>

編集::別のパス（場所2）

<li>
<a id="Browse">Browse</a>
<ul>
    <li>
    <a data-id="2" data-category="locations">Location 1</a>
    <ul><!-- -- AJAX ----></ul>
    </li>

    <li>
    <a data-id="1" data-category="locations">Location 2</a>
    <ul>
        <li>
        <a data-id="3" data-category="floors">First Floor</a>
        <ul>
            <li>
            <a data-id="truck" data-category="equipment">truck</a>
            <ul></ul>
            </li>

            <li>
            <a data-id="car" data-category="equipment">car</a>
            <ul></ul>
            </li>

            <li>
            <a data-id="boat" data-category="equipment">boat</a>
            <ul><!-- -- AJAX ----></ul>
            </li>
        </ul>
        </li>

        <li>
        <a data-id="4" data-category="floors">Second Floor</a>
        <ul><!-- -- AJAX ----></ul>
        </li>

        <li>
        <a data-id="5" data-category="floors">Third Floor</a>
        <ul><!-- -- AJAX ----></ul>
        </li>

        <li>
        <a data-id="6" data-category="floors">Fourth Floor</a>
        <ul><!-- -- AJAX ----></ul>
        </li>
    </ul>
    </li>

</ul>
</li>
4

0 に答える 0