title: JQuery .on("click") only firing after second click
body: <p>so I've been trying to animate a menu by clicking on a menu box (similar to Medium's menu). So far everything works, and on a full blown page refresh the JQuery event fires the first time without any problems. </p>
  
  <p>However, when I click on a link in the menu, it'll take me to the page but then the menu button doesn't work on the first click, but it works perfectly fine on the second click. This happens without fail. </p>
  
  <p>I've looked at several other questions similar to this but none of their solutions are solving my problem. Does anyone have any ideas what might be going wrong? Oh, and I'm also using Ruby on Rails 4 if this affects it at all. </p>
  
  <p>Menu Button HTML</p>
  
  <pre><code>&lt;div id="menu-hex"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Menu HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;%= link_to(root_url) do %&gt;
              &lt;h3 class="am"&gt;&lt;span class="icon-home profile-icos"&gt;&lt;/span&gt; Daily Feed&lt;/h3&gt;
          &lt;% end %&gt;
      &lt;/li&gt;
      &lt;li class="coming-soon"&gt;
          &lt;%= link_to(root_url) do %&gt;
              &lt;h3 class="am"&gt;&lt;span class="icon-fire profile-icos"&gt;&lt;/span&gt; Improve&lt;/h3&gt;
          &lt;% end %&gt;
      &lt;/li&gt;
      &lt;li class="coming-soon"&gt;
          &lt;%= link_to(root_url) do %&gt;
              &lt;h3 class="am"&gt;&lt;span class="icon-star profile-icos"&gt;&lt;/span&gt; Events&lt;/h3&gt;
          &lt;% end %&gt;
      &lt;/li&gt;
      &lt;li class="coming-soon"&gt;
          &lt;%= link_to("/login") do %&gt;
              &lt;h3 class="am"&gt;&lt;span class="icon-bookmarks profile-icos"&gt;&lt;/span&gt; Communities&lt;/h3&gt;
          &lt;% end %&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu-hex {
      position: absolute;
      left: 6px;
      top: 7px;
      background-image: url('homehex.png');
      width: 65px;
      height: 65px;
      background-size: 100%;
      cursor: pointer;
      z-index: 20;
  
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: moz-none;
      -ms-user-select: none;
      user-select: none;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>var menuOn = false;
  var duration = 250;
  
  $(document).on("click", "#menu-hex", function(e) {
      if(menuOn == false) {
          openMenu();
      }else {
          closeMenu();
      }
  
  });
  
  $(document).on("click", ".overlay", function(e) {
      if(menuOn == true) {
          closeMenu();
      }
  
  });
  
  
  function openMenu() {
  
      $(".overlay").css( "display", "block" );
  
      $("#focusimage").animate({opacity: 0.2}, duration);
      $("#spot-content").animate({"left":"-300px"}, duration, function() 
          { $("#spot-content").css( "display", "none" ) });
  
      $("#menu").animate({"left":"25px", opacity: 1.0}, duration);
  
      menuOn = true;
  }
  
  function closeMenu() {
  
      $(".overlay").css( "display", "none" );
  
      $("#focusimage").animate({opacity: 1.0}, duration);
  
      $("#spot-content").css( "display", "block");
      $("#spot-content").animate({"left":"25px"}, duration);
  
      $("#menu").animate({"left":"-300px", opacity: 1.0}, duration);
  
      menuOn = false;
  }
  </code></pre>