Question

I was creating a tree using UL LI list and jQuery. I used a jQuery Selector

jQuery(li:has(ul)) to find all the list nodes having childs and then added a click event to it.

jQuery(li:has(ul)).click(function(event) {

    jQuery(this).children.toggle();
    jQuery(this).css("cursor","hand");

});

This works for me except i dont understand why i get a cursor hand and click event triggering even when i take mouse pointer to childs of my selected li

<li> Parent // it works here that is fine
<ul>
<li> child1   // it works here i dont understand need explanation
</li>
<li> child2   // it works here i dont understand need explanation
</li>
</ul>
</li>

Answer 1

What you are seeing is event bubbling. When you click on a descendant element, the event also bubbles up to its ancestors. Your click handler on the ancestor element is what is being triggered. If you don’t want this, you’ll need to also stop event propagation in the click handlers of the child elements to prevent the event from bubbling up.

jQuery(li:has(ul)).children().find('li').click(function(e) {
    e.stopPropagation();
});