跨度onclick不起作用jQuery [英] span onclick does not work jquery

问题描述

我有一个用css和jquery创建的treeview结构.要扩展节点，我希望用户单击< li> 中的&span> (它是图像)，而不是单击节点本身.

这是我的HTML部分:

 < div class ="tree">< ul>< li class ="parent active">&span class ="expand"</span> a 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 1级</a>< ul>< li class ="parent active">&span class ="expand"</span< a< a>级别2</a>< ul>< li class ="parent active">&span class ="expand"</span< a< a>级别3</a>< ul>< li< a>等级4</a>/li></ul></ul></li>< li>< span class ="expand"</span> a< Level 2</a</li></ul></li></ul></div> 

这是span上的clikc事件的JS部分(但不起作用):

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

但是，以下代码可以工作，但是只需单击< li> 中的< a> :

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

我需要通过单击跨度来扩展节点，因为在单击节点时，我需要重定向到另一个页面以显示其详细信息.

请参阅为此问题创建的 jsfiddle .

那么为什么span上的click事件不起作用?

解决方案

问题出在CSS上.标签a与您的跨度重叠.用边距替换填充，一切将开始工作.

更新.:实际上-从规则中删除 a 标记的 display:block 小提琴: http://jsfiddle.net/8ucy1gjb/2/

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 ?

解决方案

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/

这篇关于跨度onclick不起作用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！