Recursively build a tree style list jQuery - fails
<p>I am trying to build a tree style list.  Whenever an LI is clicked an API call should be made to get child LIs.  All API calls simply spit out LIs.  Ideally I would like my DOM to look like the following when Browse -> LOC 1 -> Floor 3 is clicked.</p>

<pre><code>&lt;ul&gt;
    &lt;li id="Browse"&gt;
        Browse
        &lt;ul&gt;
            &lt;li id="one-1" data-id="1" data-category="locations"&gt;LOC 1&lt;/li&gt;
                &lt;ul&gt;
                    &lt;li id="floor-1" data-id="1" data-category="floors"&gt;FLOOR 1&lt;/li&gt;
                    &lt;li id="floor-2" data-id="2" data-category="floors"&gt;FLOOR 2&lt;/li&gt;
                    &lt;li id="floor-3" data-id="3" data-category="floors"&gt;FLOOR 3&lt;/li&gt;
                        &lt;p&gt;FLOOR 3 has been clicked&lt;/p&gt;
                    .
                    .
                    .
                    &lt;li id="floor-M" data-id="M" data-category="floors"&gt;FLOOR M&lt;/li&gt;

                &lt;/ul&gt;
            &lt;li id="one-2" data-id="2" data-category="locations"&gt;SOMETHING&lt;/li&gt;
            &lt;li id="one-3" data-id="3" data-category="locations"&gt;SOMETHING&lt;/li&gt;
            &lt;li id="one-4" data-id="4" data-category="locations"&gt;SOMETHING&lt;/li&gt;
            .
            .
            .
            &lt;li id="one-N" data-id="N" data-category="location"&gt;SOMETHING&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>My code is as follows:</p>

<pre><code>$("#Browse").click(buildBrowseMenus);

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

     //If no ULs have been created yet create them
     if($(this).children("ul").length == 0) {
         $(this).append("&lt;ul&gt;&lt;/ul&gt;");
     }
     $child = $(this).children("ul");

     $child.html('&lt;div class="ui-widget"&gt;Loading...&lt;/div&gt;');

     //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 -&gt; Locations -&gt; Floors -&gt; Equipment Type -&gt; 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');
            alert("ud");
        break;

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

        //Third list level, build out the Equipment for a given floor
        case 'floors':
            alert("floor");
            $child.append("&lt;p&gt;FLOOR "+$(this).data("id")+ " has been clicked&lt;/p&gt;);
        break;

        case 'equipment':
            doSomething();
        break;
     }

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

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

    }
}
</code></pre>

<p>When "Browse" is clicked it opens and closes as it should revealing the locations withing.  However when a location is clicked the entire thing closes.  Alert debugs that I placed on top (removed) reveal that when a child li is clicked teh parent event fires as well as the item that was clicked.</p>
