CODEWITHSUNDEEP
javascriptjqueryhtml
blackbishop
blackbishop

Reputation: 32720

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 <span> within the <li> (it's an image) and not on the node itself.

So here is my HTML part :

<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>
          </ul>
        </li>
        <li><span class="expand"></span><a>Level 2</a></li>
    </ul>
</li>
</ul>
</div>

Here's the JS part for the clikc event on span (but it doesn't work) :

$( '.tree li.parent > span.expand' ).click( function( ) {
    $( this ).parent().toggleClass( 'active' );
    $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});

However, the following code works but by clicking on the <a> within the <li> : 

 $( '.tree li.parent > a' ).click( function( ) {
    $( this ).parent().toggleClass( 'active' );
    $( this ).parent().children( 'ul' ).slideToggle( 'fast' );
 });

I need to expand the nodes by clicking on the span because when clicking on the node I need to redirect to another page to display its details.

Please see this jsfiddle that a created for this question.

So why the click event on span does not work ?

Upvotes: 2

Views: 3758

Answers (4)

jeremywoertink
jeremywoertink

Reputation: 2341

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.

Upvotes: 0

Fares M.
Fares M.

Reputation: 1538

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

Upvotes: 1

Sergey Kochetov
Sergey Kochetov

Reputation: 390

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/

Upvotes: 6

KJ Price
KJ Price

Reputation: 5994

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>

Upvotes: 2

Related Questions