javascript - span onclick does not work jquery - Stack Overflow

admin管理员组

文章数量:1327676

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 ?

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 ?

• javascript
• jquery
• html

Share Improve this question Follow asked Apr 17, 2015 at 20:15 blackbishopblackbishop 32.7k1111 gold badges5959 silver badges8383 bronze badges 1

• 1 Just clean your opening and closing tags. I think you did some mess there. – Advicer Commented Apr 17, 2015 at 20:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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/8ucy1gjb/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>

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

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 remend changing the CSS selector if you'd like it to click through on all of them.

本文标签： javascriptspan onclick does not work jqueryStack Overflow