爲什麼雙擊出現？

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元素中的任何位置。

Answer 2

因爲你裏面李麗，試試這個來代替：

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); 
}); 

Answer 3

因爲事件被傳播到父li。

您需要防止使用stopPropagation的行動：

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

這裏有一個更新的Fiddle。