title: Jquery - Click event doesn't work after resized
body: <p>I'm doing a responsive menu that check the window.resize event and, when it fits the minimum browser width, a click function for a button is allowed. If the browser width is greater, then the click function is unbound. I need to do this because the same element that is the button on the mobile version, is a visual element on the desktop version.</p>
  
  <p>The problem is that, with the code that I have now, when the page is loaded (desktop or mobile screen), the click function works fine. But, if I resize the browser and click on the element again, it doesn't work. If I want to mobile nav works, I need to refresh the page to make it work. Really annoying.</p>
  
  <p>To help understand what is happening, I've made a simple example. Here's is the simple code (just to check the click function issue)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- WRAPPER --&gt;
  &lt;div id="freakers-wrapper"&gt;
      &lt;!-- HEADER --&gt;
      &lt;header id="header"&gt;
          &lt;div class="header-bottom"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-5"&gt;
                          &lt;!-- MENU --&gt;
                          &lt;nav class="menu-wrapper-left"&gt;
                              &lt;a class="menu-trigger" href="#"&gt;
                                  &lt;span&gt;&lt;/span&gt;
                              &lt;/a&gt;
  
                              &lt;ul id="main-menu" class="menu menu--main menu--left main-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
                                  &lt;li class="has-children"&gt;
                                      &lt;a href="#"&gt;Shop&lt;/a&gt;
  
                                      &lt;ul class="sub-menu is-hidden"&gt;
                                          &lt;li class="go-back"&gt;&lt;a href="#"&gt;Back&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Shop 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Shop 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Shop 3&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#" &gt;Blog&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;   &lt;!-- end main-menu --&gt;
                          &lt;/nav&gt;  &lt;!-- end menu-wrapper --&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-2"&gt;
                          &lt;div class="logo"&gt;
                              &lt;a href="#"&gt;
                                  &lt;img src="images/logo.png" alt="Logo" class="img-responsive"&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-5"&gt;
                          &lt;!-- MENU --&gt;
                          &lt;nav class="menu-wrapper-right"&gt;
                              &lt;ul id="main-menu" class="menu menu--main menu--right main-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;help&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;lookbook&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;model&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;   &lt;!-- end main-menu --&gt;
                          &lt;/nav&gt;  &lt;!-- end menu-wrapper --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  &lt;!-- end header-bottom --&gt;
      &lt;/header&gt;   &lt;!-- end header --&gt;
  
      &lt;!-- MOBILE NAV --&gt;
      &lt;div id="mobile-nav"&gt;&lt;/div&gt;
  &lt;/div&gt;  &lt;!-- end freakers-wrapper --&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function($) {
      "use strict";
  
      $(document).ready(function () {
  
          $(window).on('load resize', function(){
              moveNavigation();
          });
  
          /* ----------------------------------------------------------------------
              Main Menu
          ---------------------------------------------------------------------- */
  
          //if you change this breakpoint, don't forget to update this value as well
          var MqL = 1030,
              menuLeft = $('.menu-wrapper-left').html(),
              menuRight = $('.menu-wrapper-right').html();
              console.log(menuRight);
              console.log(menuLeft);
          //move nav element position according to window width
          // moveNavigation();
  
          //mobile - open lateral menu clicking on the menu icon
          $(document).on('click', '.menu-trigger', function(event){
              event.preventDefault();
              if($('#freakers-wrapper').hasClass('push-content')){
                  closeNav();
              }else{
                  $('#freakers-wrapper').addClass('push-content');
                  $('#mobile-nav .menu').addClass('menu--open');
                  $(this).addClass('nav-is-visible');
              }
          });
  
          //open submenu
          $('.has-children').on('click', function(event){
              var selected = $(this);
              if( selected.children('ul').hasClass('is-hidden') ) {
                  selected.children('ul').removeClass('is-hidden');
              }
          });
  
          //submenu items - go back link
          $('.go-back').on('click', function(evt){
              evt.stopPropagation();
              $(this).parent('ul')
                  .addClass('is-hidden')
                  .parent('.has-children')
                  .parent('ul');
          });
  
          function closeNav(){
              $('#freakers-wrapper').removeClass('push-content');
              $('.menu--main').removeClass('menu--open');
              $('.has-children ul').addClass('is-hidden');
          }
  
          function checkWindowWidth() {
              //check window width (scrollbar included)
              var e = window, 
                  a = 'inner';
              if (!('innerWidth' in window )) {
                  a = 'client';
                  e = document.documentElement || document.body;
              }
              if ( e[ a+'Width' ] &gt;= MqL ){
                  closeNav();
  
                  if ( $('.menu-trigger').hasClass('menu-trigger-open') ){
                      $('.menu-trigger').removeClass('menu-trigger-open');
                  }
                  return true;
              } else {
  
                  var menuElm = $('.main-menu .has-children');
  
                  if($('.sub-menu ul', menuElm).hasClass('left-menu')){
                      $('.sub-menu ul', menuElm).removeClass('left-menu');
                  }
                  return false;
              }
          }
  
          function moveNavigation(){
              var navigation = $('.menu--main'),
                  desktop = checkWindowWidth();
  
              if ( desktop ) {
                  $('#mobile-nav').children().remove();
                  $('.menu-wrapper-left').html(menuLeft);
                  $('.menu-wrapper-right').html(menuRight);
              } else {
                  navigation.appendTo('#mobile-nav');
                  $('.menu--main').not(':first').remove().children('li').appendTo('.menu--main:first');
              }
          }
  
          $(".menu-trigger").click(function() {
              $(this).toggleClass("menu-trigger-open");
          });
      });
  }(jQuery));
  </code></pre>
  
  <p>If you want to see it in action, I've made a Codepen (try resize to see it working)</p>
  
  <p><a href="http://codepen.io/thehung1724/full/JYmzWr/" rel="nofollow noreferrer">http://codepen.io/thehung1724/full/JYmzWr/</a></p>
  
  <p>I hope I could explain well my problem. I've searched and didn't found a solution for this issue (or maybe I just didn't know really well what to look for). Although when you resize the screen, you can still click on the menu icon, but please notice it doesn't transform to <code>'X'</code> letter and you can't click to show sub-menu</p>
  
  <p><strong>Works</strong></p>
  
  <p><a href="https://i.stack.imgur.com/4nRIi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4nRIi.png" alt="enter image description here"></a></p>
  
  <p><strong>Doesn't work</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EZhvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZhvB.png" alt="enter image description here"></a></p>
  
  <p>Any help would be appreciated!</p>