Question

I've been reading some posts about it but I don't get it to work, I don't know why, the idea is, when clicks on inside a my list menu it shows the span of this .

 <ul class="nav navbar-nav side-nav">
                <li class="active">
                    <a href="index.html"><i class="fa fa-fw fa-arrow-circle-o-right fa-2x"></i> Inicio</a>
                </li>
                 <li>
                    <a href="RegistrarEspecialista.php" data-toggle="collapse" data-target="#demoF">Especialistas</a>
                </li>
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demoCC">Pacientes<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="demoCC" class="collapse">
                            <li>
                                <a href="RegistrarPaciente.php">Registro</a>
                            </li>


                    </ul>
                </li>
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo">Citas<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="demo" class="collapse">
                            <li>
                                <a href="#">Registro</a>
                            </li>
                            <li>
                               <a href="#">Consultas</a>
                            </li>                            
                    </ul>
                </li> 
            </ul>

there is the html, and It is my script

$(document).ready(function(){
    $('ul.nav navbar-nav side-nav li a').click(function(e){ 
         alert($(this).find("span.t").text());
         e.preventDefault();
    });
 });

Answer 1

这很好用：

$(document).ready(function(){
    $('.nav li a').click(function(e){ 
         e.preventDefault();
        alert($(this).find("span.t").text());

    });
 });

但是就像showdev提到的那样，由于你的html中没有<span>元素，你会有一个空警告。

我建议你先行preventDefault()而不是做其他行动，这是正确的顺序。

Answer 2

您的初始选择器：

$('ul.nav navbar-nav side-nav li a')

是畸形的。这就是说在父navbar-nav内找到所有带有side-nav元素的li a元素的ul.nav元素。但是navbar-nav和side-nav是类。而且，即便如此，您的ul还有三个类，因此您需要将它们链接起来：

$('ul.nav.navbar-nav.side-nav li a')

即使这样，选择器可能比必要更具体。我猜测.side-nav是最明确的。然后，甚至没有必要声明标签名称（过度指定可能有问题）。所以也许这只是最好的：

$('.side-nav li a').on('click', function(e) {
  // handler code
});

将点击事件设置为每个<a> inside a </a> <li> <a> element

2 个答案: