title: jquery click event doesn't always fire after browser has been resized
body: <p>I've got a fairly simple navigation menu that opens and closes on click. The menu behaviour only comes into play when the browser viewport is below a certain size. </p>
  
  <p>It all works great 90% of the time. The remaining 10% of the time (when I'm demonstrating it to the client, natch) the click event doesn't fire at all. As far as I can tell, the problem only occurs after the browser has been resized a few times, but as it usually works normally when the window has been resized, it's difficult to track down why it's happening. </p>
  
  <p>Code:</p>
  
  <pre><code>var smallViewport = false;
  
  $(document).ready(function(){
      if($(window).width() &lt; 520) {
          smallViewport = true;
      } 
  
      if(smallViewport == true) {
          $('nav.main').click(function(){
              console.log(' + clicky clicky');
              if($(this).find('.level-1').hasClass('open') == true) {
                  $(this).find('.level-1').slideUp('fast').removeClass('open');
              } else {
                  $(this).find('.level-1').slideDown('fast', function(){ $(this).addClass('open'); });
              }
          })
      }
  });
  
  $(window).resize(function() {
  
      if($(window).width() &lt; 520) {
          smallViewport = true;
      } else {
          smallViewport = false;
      }
      console.log(smallViewport);
  
      if(smallViewport == true) {
          $('.level-1').removeClass('open').css('display','none');
      } else {
          $('.level-1').css('display','block');
      }
  
  });
  </code></pre>
  
  <p>When the problem chooses to manifest itself, console.log(smallViewport) in the resize function outputs 'true' when it should be true, the click event just refuses to fire along with it. </p>
  
  <p>Has anybody encountered a similar problem before? Any obvious solutions I'm missing?</p>