奇怪的jquery事件bubbling

Question

我不確定這是否實際上是一個事件冒泡問題。 event.stopPropagation()不能解決問題。該方案是：

1. 點擊元素類「clickMe」（最多點擊你想要的）
2. 然後點擊li元素。點擊事件將根據點擊「clickMe」類的次數執行。

下面的代碼片段：

HTML：

<div class="clickMe">Click Me 1</div> 
<div class="clickMe">Click Me 2</div> 
<div class="clickMe">Click Me 3</div> 
<ul id="test"> 
    <li><a href="#">Test A</a></li> 
    <li><a href="#">Test B</a></li> 
    <li><a href="#">Test C</a></li> 
</ul>​​​​​​​​​​​​​​​​​​ 

JS：

$(function() { 
    $('.clickMe').live('click', function(e){ 
     //e.stopPropagation() 
     $('li', $('#test')).live('click',function(e){ 
      //e.stopPropagation() 
      alert('ouch')    
     })   
    }) 
}); 

預先感謝任何幫助或解釋這個問題。

Answer 1

您要添加另一點擊處理程序，只要「點擊」關於「clikMe」 <div>要素之一發生在<li>元素。 jQuery代碼保留了所有這些處理程序，所以在點擊幾次「clickMe」之後，會有幾個處理程序，它們都將被調用。

.live()方法不是委託事件處理的最佳方法。如果您使用的是新版本的jQuery，或者至少.delegate()，請使用.on()。

Answer 2

有關clickMe每次點擊你的事件連接到#test那是你的li元素

live重視的選擇，現在和將來匹配這，所有元素的事件處理程序。

獨立兩者並用on

$('.clickMe').on('click', function(e) { 
    //e.stopPropagation() 
}) 
$('li', $('#test')).on('click', function(e) { 
    //e.stopPropagation() 
    alert('ouch'); 
}); 

Answer 3

小提琴：

http://jsfiddle.net/iambriansreed/aEkNa/

的jQuery：

$(function() { 
    var clickme_clicks = 0, clickme_timeout = setTimeout(function(){},0) ; 

    $('.clickMe').on('click', function(e){ 
     clickme_clicks++;   
     clearTimeout(clickme_timeout); 
     clickme_timeout = setTimeout(function(){ clickme_clicks = 0; },1000); 
    }); 

    $('li a', $('#test')).on('click',function(e){ 
     e.preventDefault(); 
     //if(clickme_clicks == 0) return; 
     alert('clicks: ' + clickme_clicks);   
    }) 
});​