jQuery的不嵌套元素

Question

選擇器如果我有這樣一些元素：

<div class="one"> 
    <div class="two"> 
    </div> 
</div> 

，我想要做的事，當用戶點擊一個，但不是兩個：

$('.one:not(.two)').live('click', function(){ 
      console.log('jazz');  
     }); 

但它仍然在控制檯日誌...因爲該元素是嵌套的！我該如何解決？

Answer 1

我寧願一個單獨的單擊事件綁定到two，告訴瀏覽器停止事件冒泡，恕我直言，這是更具可讀性這樣：

$('.one').click(function() { 
    console.log('jazz'); 
}) 
.find('.two').click(function(e) { 
    e.stopPropagation(); 
}); 

Answer 2

您正在尋找

$('.one:not(:has(.two))') 

或者，您也可以在.one處理該事件，然後處理它.two並調用e.stopPropagation()，以防止它冒泡到.one。