CODEWITHSUNDEEP
javascriptjquery
Bkes
Bkes

Reputation: 137

Why does my code loop through twice?

I'm trying to figure out why my code is looping twice, I'm thinking it's because I'm checking two different classes ('.wrapper, .surround') but I can't think of another way to write that. Is this the reason my code is looping twice? I wan to check the vars backAwayVal and backAwayHome if the bet-button is clicked on the surround div. and I want to check the awayVal and homeVal if the bet-button is clicked on the wrapper div. However if I click on the wrapper div bet-button it console.logs twice.

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

Here is the 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>

Upvotes: 0

Views: 61

Answers (2)

Xhynk
Xhynk

Reputation: 13840

Using e.stopPropagation(); should work, but I want to clarify what's happening.

You have a .bet-button inside just the .surround, and another inside the .wrapper.

However, .wrapper is inside .surround so the handler bubbles through both:

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

With your current code, if you click on the bet-button 1 it works as you expect. However if you click on bet-button 2, the event will return two elements, because it's meeting both .wrapper .bet-button and .surround .bet-button.

To get around this you can move the handler up the DOM to surrounds parent, or just to the document, and then modify your selector like so:

$(document).on('click', '.surround .bet-button, .wrapper .bet-button', function(){

Upvotes: 1

Miguel Angel
Miguel Angel

Reputation: 983

The next time share the html too, this looks like a bubbling problem, you can 

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

hope this works.

Upvotes: 1

Related Questions