jQuery click event fires on parent element multiple times

Question

  gameLogic: function() {
    console.log("GAME LOGIC");
    alert("Your Turn!");
    var that = this;
    $(".game-screen").on("click", ".tic", function() {
      console.log("EVENT ATTACHED");
      var movesDisplay = $(this).text(),
        playerOne = that.playerOneMoves,
        moveID = +(this.id);
      if (movesDisplay !== "O" && movesDisplay !== "X") {
        that.playerOneMoves.push(moveID);
        if (playerOne.length > 2) {
          if (that.checkIfWinCondition(playerOne, that.winConditions)) {
            alert("GAME OVER!");
            that.inGame = false;
            ticTacToe.restartGame();
          }
        }
        $(this).text(that.playerFaction === "X" ? "X" : "O");
      }
    });
  },

I'm writing a Tic-Tac-Toe game and ran into this problem - when multiple sessions are "played" click events keep compounding. Which I solved by clearing the previous click events every time before a new one is attached.

$(".game-screen").off().on("click", ".tic", function () { //do stuff }

By the way event.stopPropagation() and event.stopImmediatePropagation() did NOT work.

Anyway, while I managed to fix the problem and understand why the click events where compounding, what I can't seem to wrap my head around is why those compounded click events kept calling the parent function gameLogic: function(). Try "playing" several sessions in a row -

console.log("GAME LOGIC"); alert("Your Turn!"); get called exponentially more with every session. Does jQuery use the parent function to track the click events or something? Can anyone explain what's happening under the hood? Why do the event handlers keep referring to the parent function?

Dilhan Jayathilake · Accepted Answer · 2017-03-30 03:23:51Z

1

Move your function implementation out from the gameLogic function like bellow;

function gameScreenClick(){
 // your click event handler code.....
}

then

$(".game-screen").on("click", ".tic", gameScreenClick);

answered Mar 30, 2017 at 3:23

Dilhan Jayathilake

1,9112 gold badges17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anon Over a year ago

I already fixed it with .off() by clearing the events before attaching new ones as I've mentioned in my post. I was simply looking for an explanation why does that happen, and how does jQuery internally refer to it's on click functions etc. Btw, your solution didn't work. Even if I separate the logic, "Your Turn!" still gets alerted exponentially more with every session jsfiddle.net/50Lw423g/3

Anon · Accepted Answer · 2017-03-30 05:02:03Z

I traced the call stack, and looked at the jQuery dispatch: function(). Actually, as it turns out, the problem wasn't with the way jQuery internally refers to it's click functions and handlers.

The culprit was on line 46. The getUserInput() attaches an event handler which in turn attaches the chooseFaction() event handler. On the next session, getUserInput() gets attached one more time and chooseFaction() is attached 2 times (+1 time from before) - so chooseFaction() fires 3 times calling generateBoard(), and in turn, calling gameLogic()etc. Thus calls to gameLogic() exponentially increasing with every iteration.

Moved $(.game-screen).off() to the restartGame() function, to remove all click events before starting a new session, as a cleaner solution.

Solution: https://jsfiddle.net/50Lw423g/4/

Collectives™ on Stack Overflow

jQuery click event fires on parent element multiple times

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related