title: Trying to get the value and text of list item
body: <p>I have multiple list items with value attributes that contain Urls. I'm trying to capture the Url and Text of each list item within a contain on click event. Nothing happens when I click on a list item.</p>
  
  <pre><code>&lt;ul id="expList" class="list"&gt;
  &lt;li value="https://hosted.demo.ca" class="collapsed expanded"&gt;Sharepoint Demo Website&lt;/ul&gt;
  &lt;li value="https://hosted.demo.ca/academic" class="collapsed active"&gt;Academic
  &lt;ul style="display: none;"&gt;&lt;li value="https://hosted.demo.ca/academic/bm"&gt;Board Meetings&lt;/li&gt;&lt;li value="https://hosted.demo.ca/academic/cmtte"&gt;Committee&lt;/li&gt;
  &lt;li value="https://hosted.demo.ca/academic/dm"&gt;Document Management&lt;/li&gt;
  &lt;li value="https://hosted.demo.ca/academic/pm"&gt;Project Management&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JsFiddle with full HTML if that helps <a href="http://jsfiddle.net/6yXV6/" rel="nofollow">http://jsfiddle.net/6yXV6/</a></p>
  
  <p>My code: </p>
  
  <pre><code>site = $('#expList');
  site.on('click','li',function(){
    siteUrl =  $(this).attr('value');
    siteName = $(this).text();
    console.log(siteUrl);
    console.log(siteName);
    RefreshSiteLists();
  });
  </code></pre>
  
  <p>I've used this code to make this list expand and collapse, could it be conflicting somehow:</p>
  
  <pre><code>function prepareList() {
    $('#expList').find('li:has(ul)')
      .click( function(event) {
        if (this == event.target) {
          $(this).toggleClass('expanded');
          $(this).children('ul').toggle('medium');
        }
        return false;
      })
      .addClass('collapsed').children('ul').hide();
  
          //Create the button functionality
      $('#expandList').unbind('click').click( function() {
          $('.collapsed').addClass('expanded');
          $('.collapsed').children().show('medium');
      });
      $('#collapseList').unbind('click').click( function() {
          $('.collapsed').removeClass('expanded');
          $('.collapsed').children().hide('medium');
      });
    };
  
  $(function() {
     $("#expList li").click(function() {
        // remove classes from all
        $("li").removeClass("active");
        // add class to the one we clicked
        $(this).addClass("active");
     });
  });
  </code></pre>
  
  <p>EDIT: I think most of you have answered my question and that there's something else in my code that's preventing it from running. So once I narrow that down I'll probably post another question related to that.</p>