Span Onclick Does Not Work Jquery

I have a treeview structure created with css and jquery. To expand a node I want the user to click on a within the

(it's an image) and not on the node itsel

Solution 1:

The issue is with css. Tag a is overlapping your span. Replace padding with margin and everything will start working.

Upd.: Actually - remove display:block from your rules for a tag fiddle: http://jsfiddle.net/8ucy1gjb/2/

Solution 2:

You are missing a closing </li> tag:

<divclass="tree"><ul><liclass="parent active"><spanclass="expand"></span><a>Level 1</a><ul><li><spanclass="expand"></span><a>Level 2</a></li><li><spanclass="expand"></span><a>Level 2</a></li><li><spanclass="expand"></span><a>Level 2</a></li><li><spanclass="expand"></span><a>Level 2</a></li></ul></li><liclass="parent active"><spanclass="expand"></span><a>Level 1</a><ul><liclass="parent active"><spanclass="expand"></span><a>Level 2</a><ul><liclass="parent active"><spanclass="expand"></span><a>Level 3</a><ul><li><a>Level 4</a></li></ul></li><!-----I Was Missing!--></ul></li><li><spanclass="expand"></span><a>Level 2</a></li></ul></li></ul></div>

Solution 3:

Instead of using padding use margin for this class

.treeli.parent > a {
    padding: 00028px;
}

replace it with :

.treeli.parent > a {
    margin: 00028px;
}

as it is now your a tag overlays the span.expand so it's not clickable.

Fiddle

Solution 4:

in your CSS selector you have .tree li.parent > span.expand. This selector is wrong for your markup. What this is looking for is

<divclass="tree"><ul><liclass="parent"><spanclass="expand"></span></li></ul></div>

That > means direct child, which you don't have. Just remove that, and you should be fine.

$(".tree li.parent span.expand").on('click', function() {});

Edit As it was pointed out to me, I missed the top level <span class="expand">. The click event would work for that top level, but wouldn't work on any of the inner ones. I would still recommend changing the CSS selector if you'd like it to click through on all of them.