title: Why in my case $(document).click directly calls the function rather than attaching an event handler?
body: <p>I work on a game and my goal is this: when the game is over the user can restart the game with a mouse click. <br> But the code <code>$(document).click(startFunction);</code> acts like <code>startFunction();</code>. <br> I also noticed that if <code>$(document).click</code> is added to the stage preceding the &quot;game over&quot; stage, then the first <code>$(document).click</code> calls the next function directly and the second <code>$(document).click</code> works like it supposed to. <br> What am I missing here? Thanks in advance.</p>
  <p>Here is my JS code. It has been simplified with only the &quot;shell&quot; related to my questions remain intact.</p>
  <pre><code>dislayedGameDescription();
  
  function gameOver() {
      $(document).off(&quot;click&quot;);
      // more code...
      $(document).click(moveByComputer);
  }
  
  function gameStart() {
      $(document).off(&quot;click&quot;);
      // more code...
      moveByComputer();
  }
  
  function moveByComputer() {
      $(document).off(&quot;click&quot;);
      // more code... 
      $(&quot;.btn&quot;).click(moveByUser);
  }
  
  function moveByUser() {
      $(&quot;.btn&quot;).off(&quot;click&quot;);
      // more code...
      determination();
  }
  
  function determination() {
      if (1) {
          if (2) {
              moveByComputer();
          } else {
              $(&quot;.btn&quot;).click(moveByUser);
          }
      } else {
      
      // I want to place here gameOver(); but it works only if I place
      $(document).click(gameOver);
  
      // And it acts like gameOver(); here so the next $(document).click in the gameOver function acts normal
      }
  }
  
  function dislayedGameDescription() {
      // more code...
      $(document).on(&quot;click&quot;, gameStart);
  }
  </code></pre>