Question

I have a tree of lists in Html such as this:

<ul class="myTree">
    <li class="treeItem">Category 1
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="treeItem">Category 2
        <ul>
            <li class="treeItem">Subcategory 1 1</li>
            <li class="treeItem">Subcategory 1 2
                <ul>
                    <li class="plus"><input type="text" value="Add a product"/></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

So as you can see, it’s a kinda elaborated list.

Now what I need is a click event on those “treeItem” class elements that would retrieve the corresponding name (Category 1, Subcategory 1 1, etc).

I came up with this:

$(".myTree").on("click", ".treeItem", function() {
    var categoryName = $(this).text();
    alert(categoryName);
});

The only problem I’m facing right now is that first of all, categoryName contains

Category 2

                Subcategory 1 1
                Subcategory 1 2

when I click on a “level 1” <li> (such as Category 1). I could bypass this by adding some catname attribute to my <li>‘s but most importantly, when I click on a “level 2” <li> (such as Subcategory 1 1), it first triggers click event on level 2 <li>, does the stuff and then fires a new click event on level 1 <li>…

It’s quite obvious why it does that, but I need a way around to have it only happen once in the highest level (when I click on “Subcategory 1 1”, it should NOT fire an event on “Category 1”).

It’s also worth noting that this tree will be generated automatically, which means I could label my treeItem‘s with some other class such as “level1” or something like that but if I could avoid that, I’d love it.

… Alright this question might need a summary as I felt I kinda lost myself in it…

1. I need a click event on a tree of lists
2. I need that click event to only be fired at the highest level (the deepest).
3. Adding some class names is possible but would like to be avoided.

Thank you!

Answer 1

First of all you need to use event.stopPropagation to stop the event bubbling up the DOM and repeating itself. Then you need to get the first text node within the li. Try this:

$(".myTree").on("click", ".treeItem", function(e) {
    e.stopPropagation();
    var categoryName = $(this).contents().filter(function() {
        return !!$.trim(this.innerHTML||this.data);
    }).first().text();
    alert(categoryName);
});

Example fiddle