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。当然，它为事件委托制作了一个更大的父级，但从技术上讲，它只会绑定一个事件（而不是每个<li>一个），它允许a[data-toggle="tab"]位于ul.nav的任何位置1}}元素。

Answer 2

因为事件正在传播到父li。

您需要使用stopPropagation阻止该操作：

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

这是一个更新的Fiddle。

Answer 3

因为li里面有li，所以请改为：

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

另一个解决方案，在我看来更干净的是使用父<ul>作为附加事件委托处理程序的元素，如下所示：

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

为什么双击出现？

3 个答案: