4

メニュー項目をクリックすると、1 回ではなく 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"]) がこの親セレクターから 2 回見つかった'nav li'ためです (メニューがネストされているため)。

もちろん、別のオプションはメインセレクターを変更してjQuery('nav > li')、直接の子<li>要素のみを選択するようにすることですが、実際にはその使用法は見当たりません。あなたの主なポイントは、すべてをターゲットにするa[data-toggle="tab"]ことnavです. 確かに、イベント委譲のより大きな親になりますが、技術的には (各 に 1 つではなく) 1 つのイベントのみをバインドし、要素内のどこにでも配置<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 に答える