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

当我点击div或按钮时，只有第一次点击处理程序的问题。怎么解决？
感谢。

更新：
滑动面板的第一次点击，它向下和向上移动。此幻灯片上的第二个按钮。

Answer 1

不确定您期望输出的是什么，但如果您想要点击这两个提醒，这似乎对我有用：

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

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

或者，您可能需要一个功能，可以检查是否已使用data（）点击了子按钮“。-buyout”。这仅允许显示警报（1）或警报（2）。以下注释：

•单击。-buyout按钮时将触发alert（2）。

•如果单击div＃basket-btn，并且未单击。-buyout，则会触发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>

以上可能更符合您的预期效果。

Answer 2

两名处理人员运作良好。 Here 是一个现场演示。

确保将您的功能包装在

中

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

如果您想要在按钮点击时阻止第一个功能，您可以使用stopImmediatePropagation()

Here 是一个有效的现场演示。

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

2 个答案: