title: jQuery - Building a tree style list
body: <p>My DOM is as follows</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="Browse"&gt;
          Browse
          &lt;ul id="browse-one"&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My jQuery in a  in the bottom of the page is:</p>
  
  <pre><code>$("#Browse").click(function() {
       $("#browse-one").html('&lt;div class="ui-widget"&gt;Loading...&lt;/div&gt;');
       $("#browse-one").load('../api/browse.php?do=getFirst');
  });
  </code></pre>
  
  <p>This script goes into the database and spits out raw LIs.  After this runs the DOM is modified as follows</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="Browse"&gt;
          Browse
          &lt;ul id="browse-one"&gt;
              &lt;li id="one-1" data-id="1"&gt;SOMETHING&lt;/li&gt;
              &lt;li id="one-2" data-id="2"&gt;SOMETHING&lt;/li&gt;
              &lt;li id="one-3" data-id="3"&gt;SOMETHING&lt;/li&gt;
              &lt;li id="one-4" data-id="4"&gt;SOMETHING&lt;/li&gt;
              .
              .
              .
              &lt;li id="one-N" data-id="N"&gt;SOMETHING&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What is the proper jqueryish way to track clicks on these LIs.  I want to extract the data-id of the clicked element and make a second API call to construct part two of the tree.  For example if data-id="1"'s LI is clicked the DOM should be:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li id="Browse"&gt;
          Browse
          &lt;ul id="browse-one"&gt;
              &lt;li id="one-1" data-id="1"&gt;SOMETHING
                  &lt;ul id="Something Here"&gt;
                      &lt;li id="two-1" data-id="1"&gt;HMM&lt;/li&gt;
                      &lt;li id="two-2" data-id="2"&gt;HMM&lt;/li&gt;
                      &lt;li id="two-3" data-id="3"&gt;HMM&lt;/li&gt;
                      .
                      .
                      .
                      &lt;li id="two-M" data-id="M"&gt;HMM&lt;/li&gt;     
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="one-2" data-id="2"&gt;SOMETHING&lt;/li&gt;
              &lt;li id="one-3" data-id="3"&gt;SOMETHING&lt;/li&gt;
              &lt;li id="one-4" data-id="4"&gt;SOMETHING&lt;/li&gt;
              .
              .
              .
              &lt;li id="one-N" data-id="N"&gt;SOMETHING&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Im having trouble thinking of how i'de keep each of the inner UL's IDs unique.  Sure I can do the "LEVEL-ID" as in "two-1" but I feel this is hackish and not the proper jquery way.</p>
  
  <p>EDIT:</p>
  
  <p>But now how do I track the children's clicks??  This doesn't seem valid but I hope you understand wht I'm trying to do</p>
  
  <pre><code>$("#Browse").click(function() {
       $("#locations-browse").html('&lt;div class="ui-widget"&gt;Loading...&lt;/div&gt;');
       $("#locations-browse").load('../api/browse.php?do=getFirst');
  
       //Child is tracked
       $("#locations-browse").delegate("li","click",function(evt){
          var inner = $(this).append("&lt;ul&gt;&lt;/ul&gt;");
          inner.html('&lt;div class="ui-widget"&gt;Loading...&lt;/div&gt;');
          inner.load('../api/browse.php?do=getSecond');
  
          $(this).delegate("li","click", function(evt) {
              alert("Child ". $(this).data("id") . " is clicked";
          });
      });
  });
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>Hmm this still is not working:</p>
  
  <pre><code>$("#Browse").click(function() {
       $("#locations-browse").html('&lt;div class="ui-widget"&gt;Loading...&lt;/div&gt;');
       $("#locations-browse").load('../api/browse.php?do=getFirst');
  
       //Child is tracked
       $("#locations-browse").delegate("li","click",function(evt){
          $(this).append("&lt;ul&gt;&lt;/ul&gt;");
          $(this).children("ul").load('../api/browse.php?do=getSecond?location-id='.$(this).data("id"));
  
          $(this).delegate("li","click", function(evt) {
              alert($(this).data("id"));
          });
      });
  });
  </code></pre>