Question

I’m trying to take the value of the.live() li element using jquery as the following code :

$("body").on("click", "#nav li:has(ul)", function (event) {
   if (this == event.target) {
      $(this).toggleClass('clicked').children('ul').slideToggle();
      $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
      $(this).siblings().removeClass('clicked').find("ul").slideUp();
   }
})

$("#content").load("content.html");

and inside content.html I put some code like this:

   <ul id="nav">
       <li value='2012'>2012
         <ul>
             <li value='Geography'>Geography</li>
             <li value='Topography'>Topography</li>
             <li value='Geological'>Geological</li>
             <li value='Seismology'>Seismology</li>
             <li value='Volcanology'>Volcanology</li>
             <li value='Oceanography'>Oceanography</li>
             <li value='Hydrogeology'>Hydrogeology</li>
             <li value='Meteorology'>Meteorology</li>
             <li value='Demography'>Demography</li>
         </ul>
       </li>
   </ul>

So, when I click in the li element, alert($('li').attr('value'),
how to get its value?

Answer 1

In your event listener, add an extra else condition to the event listener.

Unless prevented, the event will always fire on click on (the descendants of) the #nav li:has(ul) element. Check whether the event.target element points to a <li>.

$("body").on("click", "#nav li:has(ul)", function (event) {
   var $target = $(event.target);
   if (this == event.target) {
      $target.toggleClass('clicked').children('ul').slideToggle()
      $target.find('li:has(ul)').removeClass('clicked').find("ul").slideUp()
      $target.siblings().removeClass('clicked').find("ul").slideUp();
   } else if ($.nodeName(event.target, 'li')) {
       // LI element, not the root li
       var val = $target.attr('value');
   }
});

This code assumes that the clicked <li> element does not have any other descendants (that is: plain-text). If it does, you have to traverse the tree as well.

Instead of adding a non-standard value attribute, I recommend to use data-attributes, eg:

<li data-value='Geological'>Geological</li>

Getting the value of the data-attribute:

$target.attr('data-value'); // Or:
$target.data('value');