jquery - 为什么会出现双击？

Question

当我单击菜单项时，我收到 2 个单击事件，而不是一个 - 问题出在哪里？

HTML:

<nav class="nav-collapse">
    <ul class="nav">
        <li class="dropdown active">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#1">Item</a></li>
                <li><a data-toggle="tab" href="#2">Item</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#3">Item</a></li>
                <li><a data-toggle="tab" href="#4">Item</a></li>
            </ul>
        </li>
    </ul>
</nav>

JS

jQuery('nav li').on('click', 'a[data-toggle="tab"]',  function(){
    console.log(this);
});

http://jsfiddle.net/nonamez/ekMSy/1/

Answer 1

我认为人们对此想得太深了。只需删除 li选择器的一部分:

jQuery('nav').on('click', 'a[data-toggle="tab"]',  function(e){
    e.preventDefault();
    alert(this);
});

http://jsfiddle.net/W62Sw/1/

您之前遇到问题的原因是因为从该父选择器中找到了两次目标元素( a[data-toggle="tab"] ): 'nav li' (因为您有嵌套菜单)。

当然，另一个选择是将主选择器更改为 jQuery('nav > li')所以它只选择直接子项 <li>元素，但我真的不认为它有什么用处。您的要点只是针对所有 a[data-toggle="tab"] ，所以只需将容器保留为 nav 。当然，它为事件委托(delegate)提供了一个更大的父级，但从技术上讲，它只会绑定(bind)一个事件(而不是每个 <li> 一个)，并且它允许 a[data-toggle="tab"] 。位于ul.nav中的任何地方元素。