處理程序子元素時，父母有自己的處理程序

Question

我有以下標記：

<div id="basket-btn"> 
<button class="buyout" type="button"><span>Text</span></button> 
</div> 

和兩個點擊處理：

$('#basket-btn').click(function(){ 
alert(1); 
}) 

$('.buyout').click(function(){ 
alert(2); 
}) 

當我點擊股利或唯一的按鈕上升的問題首先點擊處理程序如何解決它？
謝謝。

UPDATE：
爲滑動屏幕的第一次點擊，它的移動向下和向上。這個滑動面板上的第二個按鈕。

Answer 1

兩個處理程序運行良好。 Here是一個現場演示。

確保包裹內

$(document).ready(function(){ 
//your stuff here 
}); 

的功能，如果你想防止按鈕點擊第一個功能，您可以使用stopImmediatePropagation()

Here是一個工作現場演示。

Answer 2

不知道你期望的輸出，但如果你想在點擊這兩個警報，這似乎爲我工作：

<script type="text/javascript"> 
$(document).ready(function(){ 
     $('#basket-btn').click(function(){ 
      alert(1); 
     }) 

     $('.buyout').click(function(){ 
      alert(2); 
     }) 
}); 
</script> 

或者，您可能希望它可以檢查孩子按鈕的功能「.-買進」已被點擊或不使用數據（）。這隻允許顯示警報（1）或警報（2）。請注意以下事項：

•單擊.-買斷按鈕時警報（2）將觸發。

•如果點擊div＃basket-btn，並且沒有點擊.-買斷，alert（1）將會觸發。

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#basket-btn').click(function(){ 
      if($(this).children().data('clicked') != true) { 
       // if child button has not been clicked; do this... 
       alert(1); 
      } 
      }) 

      $('.buyout').click(function(){ 
       // if child button is clicked; do this... 
       alert(2); 
       $(this).data('clicked', true); 
      }) 
     }); 
</script> 

上面可能更朝向你想要的效果。