Как получить выбранный элемент в виде дерева jQuery (глава 2)?

Question

Следуя подсказке, полученной на мой предыдущий вопрос, я сталкиваюсь с другой проблемой.

У меня есть этот список:

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

В настоящее время я использую этот фрагмент JavaScript , чтобы поместить класс CSS в мой элемент LI:

<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>

Меня беспокоит то, что при нажатии на дочерний узел родителя LI я не выбираю его. Есть ли какой-нибудь рекурсивный способ достижения этого или я должен один за другим разбираться с каждым уровнем, который я хочу видеть в дереве?

Answer 1

Добавьте это в конец функции click:

e.stopPropagation();

События всплывают. Когда вы щелкаете по дочернему узлу, он создает событие щелчка для него, а затем для каждого из его родителей - так же, как вы их щелкали. stopPropagation - это способ остановить это поведение (return false; также может работать, но может помешать другим функциям).

Смотрите это в действии здесь: http://jsbin.com/icehe