jQuery上一次事件触发两次

I am building a jQuery tree style list using the following code. Each API call (except the last) spits N many LIs as follows. The last spits out a table for me to put in another div.

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

While navigating the tree the following happens:

  • Browse is clicked - 1 HTTP request to ../api/browse.php?do=getLocations
  • One of the locations is clicked - 1 HTTP request to ../api/browse.php?do=getFloors&location-id=ID_OF_JUST_CLICKED
  • One of the floors is clicked - 1 HTTP request to ../api/browse.php?do=getEquipment&floor-id=ID_OF_JUST_CLICKED
  • One of the equipment is clicked - 2 HTTP requests to ../api/browse.php?do=buildTables&location_id=' + browseList['location_id'] + '&floor_id=' + browseList['floor_id'] + '&device_type=' + browseList['device_type']

The weird thing is the last click event is firing twice. The alert box shows it's the same object that is being hit twice. This only happens for hte last element. It happens no matter how many pieces of equipment.

    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;

    }
}

What is the issue? The last click should only fire once.

EDIT::: The DOM is as follows when (Browse->Location 1->First Floor->Car) is clicked

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

EDIT:: A different path (location 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>