Javascript 为什么我的代码循环两次？

我试图弄清楚为什么我的代码会循环两次，我想这是因为我检查了两个不同的类（'.wrapper，.around'），但我想不出另外一种方法来编写它。这就是我的代码循环两次的原因吗？如果在环绕div上单击了bet按钮，我想检查vars backAwayVal和backAwayHome。如果在包装div上单击了bet按钮，我想检查awayVal和homeVal。但是，如果我单击包装div bet按钮，控制台会记录两次

$('.wrapper, .surround').on('click', '.bet-button', function(){
    var self = $(this);
    console.log(self);

    var gameId = self.attr('gameid');

    var awayVal = $('#' + gameId + ' input[name=betAmountAway]').val();
    var homeVal = $('#' + gameId + ' input[name=betAmountHome]').val();

    var backAwayVal = $('#' + gameId + ' input[name=back-away-val]').val();
    var backHomeVal = $('#' + gameId + ' input[name=back-home-val]').val();

    var awayId = $('#' + gameId + ' .bet-input-away').data('away-id');
    var homeId = $('#' + gameId + ' .bet-input-home').data('home-id');

    var pointTotals = $('#' + gameId + ' .total-points').val();

    var id, value;

    if (awayVal) {
      id = awayId;
      value = awayVal;
    }
    if (homeVal) {
      id = awayId;
      value = homeVal;
    }
    if (backAwayVal) {
      id = awayId;
      value = backAwayVal;
    }
    if (backHomeVal) {
      id = homeId;
      value = backHomeVal;
    }if (!value) {
        alert('please enter a value!')
    }else {}

以下是HTML：

<div class="surround">
  <div class="wrapper col-lg-10 col-md-10 col-sm-12"></div>
  <div class="signup-popup-background">
    <div class="signup-popup">
      <div class="close-button"><i class="fas fa-times-circle"></i></div>
      <div class="sign-in-register">
        <div class="register">
          <div id="register-box">
            <a class="fill-div" href="{{ www }}user/register/"><p>Register</p></a>
          </div>
        </div>
        <div class="signup">
          <div id="sign-in-box">
            <a class="fill-div" href="{{ www }}user/login/"><p>Sign In</p></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="betting-popup">
    <div class="checkmark">
        <i class="fas fa-check-circle check"></i>
    </div>
    <div class="bet-info">
        <span class="betting-popup-name"></span>
    </div>
    <div class="bet-amount">
        <span class="betting-popup-amount"></span>
    </div>
  </div>
<div class="twitter-background">
  <div class="twitter-popup">
    <div class="twitter-submit-button">
    </div>
  </div>
</div>

---

下次也共享html时，这看起来像冒泡问题， 你可以

$('.wrapper, .surround').on('click', '.bet-button', function(e){ 
e.stopPropagation();
// do your logic
}

---

希望这能起作用。

下次也共享html时，这看起来像个冒泡问题， 你可以

$('.wrapper, .surround').on('click', '.bet-button', function(e){ 
e.stopPropagation();
// do your logic
}

---

希望这能奏效。

使用

e.stopPropagation（）应该有效，但我想澄清发生了什么

您在
.round
中有一个
.bet按钮，在
.wrapper
中有另一个按钮

但是，
.wrapper
位于
.around
内部，因此处理程序会在这两个区域中冒泡：

<surround>
    <bet-button 1>
    <wrapper>
        <bet-button 2>
    </wrapper>
</surround>

使用
e.stopPropagation（）应该有效，但我想澄清发生了什么

您在
.round
中有一个
.bet按钮，在
.wrapper
中有另一个按钮

但是，
.wrapper
位于
.around
内部，因此处理程序会在这两个区域中冒泡：

<surround>
    <bet-button 1>
    <wrapper>
        <bet-button 2>
    </wrapper>
</surround>

事实上，如果.surround在.wrapper内部，或者反之亦然，那么您可能会发生两次这种情况（它不是这样循环的）。。。当然
console.log（self）记录两个不同的元素？@MiguelAngel因此我有两个HTML文档，一个是在javascript中生成的，另一个是在实际生成的html@JaromandaX因此，一个HTML是通过javascript动态生成的，另一个是通过HTML生成的。HTML的生成方式与此无关，如果.surround在.wrapper中，或者反之亦然，那么您可能会发生两次这种情况（它不是这样循环的）。。。当然
console.log（self）记录两个不同的元素？@MiguelAngel因此我有两个HTML文档，一个是在javascript中生成的，另一个是在实际生成的html@JaromandaX所以一个HTML是通过javascript动态生成的，一个是通过html生成的。html是如何生成的是无关的。我添加了htmlOk，所以我认为它是有效的，你能解释一下为什么它有效吗？它有效的原因是，如果你点击
环绕
中的
.bet>按钮，它只会触发一次。但是您有
包装
内部环绕，因此
.wrapper.bet按钮
和
.surround.bet按钮
都会冒泡，因为这两个处理程序都已触发。您可以通过将事件处理程序向上移动到DOM来解决此问题，例如：
$（document）.on（'click'，'.round.bet button，.wrapper.bet button'，function（）{
最好读取是，'$（'.wrapper，.round'））'返回两个元素，一个用于
环绕
，另一个用于
包装
，然后您将一个事件绑定到这两个元素，然后当您单击它时，两个事件都被调用，因为父级和子级都是单击事件，
e.stopPropagation（）
在这里不是最好的选择，因为您正在停止所有执行，而不仅仅是双循环，对您来说最好的方法是改进查询选择器，使其更具体，并且只绑定一次事件。这完全取决于您想要什么。我添加了htmlOk，所以我认为它可以工作，您能解释为什么它可以工作吗？它可以工作，因为如果您单击在
环绕
中的
.bet按钮
上，该按钮只触发一次。但是您的
包装
内部环绕，因此
.wrapper.bet按钮
和
环绕.bet按钮都会冒泡，因为这两个处理程序都已触发。例如，您可以通过将事件处理程序向上移动到DOM来解决此问题因此：
$（文档）.on（'click'，'.surround.bet按钮，.wrapper.bet按钮，.function（）{
最好阅读是的，'$（'.wrapper.surround'））'返回两个元素，一个用于
环绕
，另一个用于
包装
，然后您将一个事件绑定到这两个元素，然后当您单击它时，两个事件都被调用，因为父级和子级都是单击事件，
e.stopPropagation（）
并不是最好的选择，因为您正在停止所有执行，而不仅仅是双循环，最好的方法是改进查询选择器，使其更具体，并且只绑定一次事件。这取决于您到底想要什么。