Question

我正在试图找出为什么我的代码循环两次，我在想它是因为我正在检查两个不同的类（'.wrapper，.surround'）但我想不出另一种写法那。这是我的代码循环两次的原因吗？如果点击环绕div上的下注按钮，我想检查vars backAwayVal和backAwayHome。如果在包装器div上点击了下注按钮，我想检查awayVal和homeVal。但是，如果我点击包装器div下注按钮，它将控制台.logs两次。

$('.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>

Answer 1

下次也分享html，这看起来像一个冒泡的问题，你可以

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

希望这有效。

Answer 2

使用e.stopPropagation();应该有效，但我想澄清一下发生了什么。

.bet-button内有.surround，.wrapper内有.wrapper。

但是，.surround <surround> <bet-button 1> <wrapper> <bet-button 2> </wrapper> </surround>内的，因此处理程序会同时出现：

.wrapper .bet-button

使用您当前的代码，如果您点击下注按钮1 ，它会按预期工作。但是，如果您点击下注按钮2 ，该事件将返回两个元素，因为它会遇到 .surround .bet-button和surrounds。

要解决此问题，您可以将处理程序向上移动到document父级，或者只移动到$(document).on('click', '.surround .bet-button, .wrapper .bet-button', function(){，然后修改您的选择器，如下所示：

devtools::install_github('IRkernel/IRkernel')

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

2 个答案: