列表中的Click事件正在拨打多个电话

Question

我有一个物品清单

如果我单击列表1，-> 2，-> 3，然后单击Btn，则它运行的次数是单击Btn之前单击的次数

这里是示例演示

$('li.list-group-item').on('click', function(e) {
  $('.circle-btn').on('click', function(p) {
    alert('check');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 text-center">
  <button class="btn btn-lg btn-info buy-now-btn circle-btn">
    Btn<br>
    <span class="askingAmt"></span>
  </button>
</div>
<div class="list">
  <li href="#" class="list-group-item row">
    1
  </li>
  <li href="#" class="list-group-item row">
    2
  </li>
  <li href="#" class="list-group-item row">
    3
  </li>
</div>

如何确定只有最后单击的项目才能执行.circle-btn单击？

即使我在第一次单击后尝试使用e.stopPropogation()，但没有帮助

Answer 1

$('li.list-group-item').on('click', function(e) {
  $('.circle-btn').on('click', function(p) {
    alert('check');
  });
})

基本上，您要做的是只要.list-group-item上发生点击事件，您就订阅一个

new点击事件处理程序，这意味着将定义15次相同的事件处理程序，如果您单击.list-group-item 15次。
只需将内部点击侦听器移出外部点击侦听器即可。

Answer 2

此代码为btn上list事件中的每个元素添加。如果您只需要一个事件，则在按钮上单击需要以下代码：

  $('.circle-btn').on('click', function(p) {
    alert('check');
  });