Jquery changing div text value upon clicking on li items
<p>I am building a theme selector for maps and want to reflect the currently selected theme.</p>

<p>The code seems to work but never returns the value of the "li" item, it always returns "s-thumbs" for whatever "li" item I click on. I tried using the .closest() method but to no avail.</p>

<p>I'm following <a href="http://www.learningjquery.com/2009/09/working-with-events-part-3-more-event-delegation-with-jquery" rel="nofollow">this article.</a></p>

<pre><code>    &lt;script language="javascript"&gt;
    $("ul.s-thumbs").live("click", function(event) {
      $("#theme_title").text(
          $(this).closest("ul.s-thumbs li").attr("class")
        );
     });
    &lt;/script&gt;


    &lt;div id="theme"&gt;You have selected the &lt;div id="theme_title"&gt;&lt;/div&gt; Theme&lt;/div&gt;
        &lt;div class="container_16" id="themebg"&gt;
        &lt;!--&lt;div class="grid_1"&gt; &lt;a href="" "img" src="/styles/image/leftarrow.png" id="leftarrow" alt=""/&gt;&lt;/div&gt;--&gt;
        &lt;div class="grid_16 slider-wrapper"&gt;
        &lt;ul class="s-thumbs"&gt;
                    &lt;li class="Default"&gt; &lt;a href="javascript:setRoadmap()"&gt;&lt;img src="/styles/image/thumbs/default.png" alt="" /&gt;&lt;/a&gt;Default&lt;/li&gt;
                    &lt;li class="Hatchery"&gt; &lt;a href="javascript:setGreen()"&gt;&lt;img src="/styles/image/thumbs/hatchery.png" alt="" /&gt;&lt;/a&gt;Hatchery&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>
