How to retrieve a clicked element in a jQuery treeview (chapter 2)?

Question

Following the hint I received on my previous question I come across another problem.

I have this list:

<ul id="treeview">
    <li>group1a
        <ul>
            <li>group11 </li>
        </ul>
    </li>
    <li>group2 </li>
    <li>group3 </li>
    <li>group4 </li>
    <li>group5 </li>
</ul>

I am currently using this piece of JavaScript to put a cssclass onto my LI element:

<script type="text/javascript">
            $().ready(function () {
                $("#treeview").treeview();
            });

            $("#treeview li").click(function (e) {
                // Clear all selected states
                $('#treeview li').removeClass('nodeselected');
                // Set current as selected
                $(this).addClass("nodeselected");

            });

        </script>

My worry is that when clicking on the child node of a LI parent, I don't get it selected. Is there some recursive way to achieve that or should I one by one deal with every level I want in my treeview?

Answer 1

Add this to the end of the click function:

e.stopPropagation();

Events bubble up. When you click on a child node, it creates a click event for it, and then for each of its parents - as you clicked them too. stopPropagation is the way to stop that behavior (return false; can also work, but might prevent other functionality).

See it in action here: http://jsbin.com/icehe