4

当我单击菜单项时，我得到 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/

4

3 回答 3

2

我认为人们在这方面想得太多了。只需删除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

于 2013-03-28T19:59:25.027 回答
1

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

您需要使用以下命令阻止该操作stopPropagation：

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

这是一个更新的Fiddle。

于 2013-03-28T19:54:50.883 回答
0

因为你在 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);
});
于 2013-03-28T19:54:23.790 回答