I am building a theme selector for maps and want to reflect the currently selected theme.

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.

I'm following this article.

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


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

I am building a theme selector for maps and want to reflect the currently selected theme.

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.

I'm following this article.

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


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

• javascript
• jquery
• html

• why are you using live() ? what is #theme_title? – Fabrizio Calderan Commented May 8, 2012 at 16:16
• I used live() as I was following the linked article (a bit updated) I agree :) #theme_title is the div where I want the text to appear. Sorry I should have pasted it in the code, updating it now – ficho Commented May 8, 2012 at 16:22

5 Answers 5

 $("ul.s-thumbs").on("click", "li", function() {
    var myText = $(this).attr("class");
    alert( myText );        
    $("#theme_title").text( myText );
 });

Demo jsFiddle

Use the .on() metod: http://api.jquery./on/ adding the specific element after the event (click)

This is a new replacement for the (today) deprecated .live() method.

$('ul.s-thumbs li').on('click', function(){
  var getClass = $(this).attr('class');
  $("#theme_title").text(getClass);
});

Demo link: http://jsfiddle/ChaseWest/w2tCE/4/

$("ul.s-thumbs").on("click", "a", function(event) {
  var txt = $(this).closest("ul.s-thumbs li").attr("class");
  $("#theme_title").text(txt);
 });

NOTE live() has been deprecated.

Add the event handler to the li instead of the ul. I also used on which is the preferred method in Jquery 1.7+

$("ul.s-thumbs li").on("click", function(event) {
    $("#theme-title").html(      
      $(this).attr("class")
    );
 });

Demo: http://jsfiddle/euSye/1/

<script language="javascript">
    $(document).ready(function() {
        $(".s-thumbs").on("click", "a", function(e) {
            $("#theme_title").text( $(e.target).parent("li").attr("class") );
        });
    });
</script>