title: $(window).resize only triggered on browser refresh?
body: <p>I've read through numerous entries in SO about the jQuery window resize event and ways to get it to work - i.e., </p>
  
  <pre><code>    $(window).on('resize',function(),
      $(window).bind('resize',function(),
      $(window).resize(function()
  </code></pre>
  
  <p>and for whatever reason, it's only working for me when the page is refreshed.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$(function() {
    function checkWinSize() {
      if ($(window).width() &gt;= 1120) {
        //Enable Click Handler
        $('#menu-top-inner nav &gt; ul &gt; li').click(function () {
          $(this).not('.menu-title').addClass('menu-on');
          $(this).children('.top-items').show();
        }).mouseleave(function () {
          $(this).removeClass('menu-on');
          $(this).children('.top-items').hide();
        });
        $('#top-eg').click(function () {
          loadTopMenu(this, '/eyeglasses/all-prescription-eyeglasses.aspx #alphaLinks + div');
        });
        $('#top-sg').click(function () {
          loadTopMenu(this, '/sunglasses/all-sunglasses.aspx #alphaLinks + div');
        });
        $('#top-ps').click(function () {
          loadTopMenu(this, '/prescription-sunglasses/all-prescription-sunglasses.aspx #alphaLinks + div');
        });
        $('#top-cl').click(function () {
          loadTopMenu(this, '/contact-lenses/all-contact-lenses.aspx #alphaLinks + div');
        });
      } else {
        //Disable Click Handler
        $('#menu-top-inner nav &gt; ui &gt; li').click(false);
      }
    }
    checkWinSize();
  
    $(window).on('resize', function () {
      checkWinSize();
    });
  });
  </code></pre>
  
  <p>EDIT: Here's the HTML</p>
  
  <pre><code>&lt;!-- MENU TOP START ++ --&gt;
  &lt;div id="menu-top"&gt;
    &lt;!-- MENU TOP INNER START ++ --&gt;
    &lt;div id="menu-top-inner"&gt;
      &lt;!-- NAV START ++ --&gt;   
      &lt;nav role="navigation"&gt;
        &lt;ul&gt;
          &lt;li id="top-men"&gt;&lt;span&gt;Men&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuMen" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-women"&gt;&lt;span&gt;Women&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuWomen" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-eg"&gt;&lt;span&gt;Eyeglasses&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuEyeglasses" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-sg"&gt;&lt;span&gt;Sunglasses&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuSunglasses" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-ps"&gt;&lt;span&gt;Prescription Sunglasses&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuRxSunglasses" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-cl"&gt;&lt;span&gt;Contact Lenses&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuContactLenses" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="top-help"&gt;&lt;span&gt;Help&lt;/span&gt;
            &lt;div class="top-items"&gt;
              &lt;asp:Literal ID="ltrlTopMenuHelp" runat="server" /&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;!-- NAV END xx --&gt;
    &lt;/div&gt;
    &lt;!-- MENU TOP INNER END xx --&gt;
  &lt;/div&gt;
  &lt;!-- MENU TOP END xx --&gt;
  </code></pre>
  
  <p>If I resize the window, the menus retain their click state from what was set at document load.  However, if I refresh the page, the correct click handler settings are activated.</p>
  
  <p>Thoughts on what may be happening here?</p>
  
  <p>UPDATE:  I changed the click handlers to use <code>.bind('click', function()</code> to be consistent with the change to <code>.unbind('click')</code> when I wanted to disable the mouse clicks.  However, the clicks are not re-binded if the click is unbinded.  Here's the new script (no HTML changes were made).  Also, I had to specify the exact click handler IDs to unbind (wasn't aware of this before).  Also, I checked to ensure there were no instances of <code>$(window).resize('off')</code> or other code that might be countering the resizing.</p>
  
  <pre><code>var eventsBound = false;
  function checkWinSize() {
    if ($(window).width() &gt;= 1120 &amp;&amp; !eventsBound) {
      eventsBound = true;
      $('#menu-top-inner nav &gt; ul &gt; li').bind('click', function () {
        $(this).not('.menu-title').addClass('menu-on');
        $(this).children('.top-items').show();
      }).mouseleave(function () {
        $(this).removeClass('menu-on');
        $(this).children('.top-items').hide();
      });
      $('#top-eg').bind('click', function () {
        loadTopMenu(this, '/eyeglasses/all-prescription-eyeglasses.aspx #alphaLinks +    div');
      });
      $('#top-sg').bind('click', function () {
        loadTopMenu(this, '/sunglasses/all-sunglasses.aspx #alphaLinks + div');
      });
      $('#top-ps').bind('click', function () {
        loadTopMenu(this, '/prescription-sunglasses/all-prescription-sunglasses.aspx #alphaLinks + div');
      });
      $('#top-cl').bind('click', function () {
        loadTopMenu(this, '/contact-lenses/all-contact-lenses.aspx #alphaLinks + div');
      });
    } else {
      eventsBound = false;
      $('#menu-top-inner nav &gt; ul &gt; li,#top-eg,#top-sg,#top-ps,#top-cl').unbind('click');
    }
  }
  $(window).on('resize', checkWinSize);
  </code></pre>
  
  <p><strong>SOLVED:</strong></p>
  
  <p>I was able to resolve this final issue by adjusting the condition for the bind check.  In the <code>} else {</code>, I changed that to <code>} else if ($(window).width() &lt; 1120 &amp;&amp; eventsBound) {</code> as the other was handling everything even when the window size was above 1120 but resized and the eventsBound was true.</p>