How to reset event on window resize

Question

I am building responsive menu. I want to show Menu button, when I am under 1100px, and for above i show normal horizontal menu. I first check $(window).width() and if width is less than 1100px I trigger some events, and if not then another.

My Menu button (for under 1100px) has click event. When I first have windows above 1100px (for example 1300px) and then resize for mobile, this click event does not work.

It works only when I reload my page.

$(document).ready(function() {
  if($(window).width() < 1100) {
    $('.menu-button').click(function(e) {
      $('#menu-body').slideToggle();  
      $(this).parent().siblings().children().children().removeClass('active');
    });

    $('.menu-top').click(function(e) {
      $(this).parent().siblings().children().removeClass('active');
      $(this).siblings().addClass('active');
    });

  } else {
    $('.menu-top').mouseover(function(e) {
      $(this).parent().parent().children().children().removeClass('active');
      $(this).siblings().addClass('active');
      $(this).parent().addClass('active-top');
    });

    $('.menu-point').mouseleave(function(e) {
      $(this).removeClass('active-top');
      $(this).children().removeClass('active');
    });
  }
});

I already do that with CSS. With media queries. Here goes just about events. When I switch / resize the browser to mobile, my events does not work anymore. — lukpar, Jul 09 '19 at 07:30
Possible duplicate of [jQuery on window resize](https://stackoverflow.com/questions/9828831/jquery-on-window-resize) — Ivan Rubinson, Jul 09 '19 at 07:37

Ivan Rubinson · Answer 1 · 2019-07-09T07:40:25.023

The problem is that you're setting the click/mouse event listeners only when the document finishes loading ($(document).ready). This is called after the page is done loading, and after refresh.

You'll need to call this code again whenever the windows size passes the breakpoint in either direction.

jQuery on window resize

In your case,

function foobar() {
    if($(window).width() < 1100) {
        $('.menu-button').click(function(e) {
            $('#menu-body').slideToggle();  
            $(this).parent().siblings().children().children().removeClass('active');
        });

        $('.menu-top').click(function(e) {
            $(this).parent().siblings().children().removeClass('active');
            $(this).siblings().addClass('active');
        });
    } else {
        $('.menu-top').mouseover(function(e) {
            $(this).parent().parent().children().children().removeClass('active');
            $(this).siblings().addClass('active');
            $(this).parent().addClass('active-top');
        });

        $('.menu-point').mouseleave(function(e) {
            $(this).removeClass('active-top');
            $(this).children().removeClass('active');
        });
    }
}
$(document).ready(foobar);
$(window).on('resize', foobar);

I have tried that, but than my click event happens more than just one time, because the resize event happens more times. — lukpar, Jul 09 '19 at 12:31
So you need to unsubscribe the listener before resubscribing. — Ivan Rubinson, Jul 10 '19 at 17:38

How to reset event on window resize

1 Answers1