处理程序子元素时，父母有自己的处理程序

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> 

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