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 个 HTTP 请求../api/browse.php?do=getFloors&location-id=ID_OF_JUST_CLICKED
  • 单击其中一个楼层 - 1 个 HTTP 请求../api/browse.php?do=getEquipment&floor-id=ID_OF_JUST_CLICKED
  • 单击其中一台设备 - 2 个 HTTP 请求../api/browse.php?do=buildTables&location_id=' + browseList['location_id'] + '&floor_id=' + browseList['floor_id'] + '&device_type=' + browseList['device_type']

奇怪的是最后一次点击事件触发了两次。警告框显示它是被击中两次的同一个对象。这只发生在最后一个元素上。无论有多少设备，它都会发生。

    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;

    }
}

问题是什么？最后一次点击应该只触发一次。

编辑::: 单击 (Browse->Location 1->First Floor->Car) 时的 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