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:

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

Solution 3:

Instead of using padding use margin for this class

.tree li.parent > a {
    padding: 0 0 0 28px;
}

replace it with :

.tree li.parent > a {
    margin: 0 0 0 28px;
}

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

<div class="tree">
  <ul>
    <li class="parent">
      <span class="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.