Search code examples
javascriptjquerylistparent

Jquery get list value without parent

I have this code that for now creates a Alert() with the value of that list item. Now when i click a list item that has another list item as parent. it will alert() them both.

$("#nav li").click(function() {
    $LiValue = this.value;
    alert($LiValue);
});

Example. here is the HTML

<li value="1">Home</li>
  <li value="2">Information
    <ul class="subs">
    <li value="3">History</li>
    <li value="4">Present</li>
    <li value="5">Future</li>
  </ul>
</li>

Now when i click on list item "Information" it will return with value 2 When i click on list item "Present" it will return value 4 and then 2.

How can i only return the list item i click on and not the parent?

--------->>>> SOLVED!! (can't accept answer yet) Thank you all for helping me. i will accept the answer as soon as i can. thank you!

Solution

  • Events in JavaScript naturally bubble up the DOM tree, from child elements to their ancestors. You can stop this behavior by stopping the event propagation.

    $("#nav li").click(function(e) {
    e.stopPropagation();
    $LiValue = this.value;
    alert($LiValue);
});