JS sidebar menu animation doesn't work at random resolutions after resizing screen/window

Question

I'm testing an application where the sidebar menu categories do not show items at random resolutions after resizing window/screen.

For example:

After clicking the category at 1440px it does not show the items, then I resize to 1250px and it does show the items, then I resize to 900px and back to 1440px and it does show the items after a click, but it doesn't show for 1250px.

I have three media queries: < 768, >= 768 and <= 1200, and < 1200

Part of my js looks like this:

    var sidebarItemClick = function(e) {
    $(this).parent().find('.subnav').toggleClass("subnav--active");
    $(this).find('.sidebar__arrow').toggleClass("sidebar__arrow--rotate");  
};


if ($(window).width() < 768 || $(window).width() > 1200) {
    $(".sidebar__item--has-sub a").bind("click", sidebarItemClick);
  }

Answer 1

I found an answer. After resizing the window function would keep binding the sidebarItemClick function, but it wouldn't unbind it after running. So every window resize increased the amount of bound functions making it not work properly.

Adding unbind solved the issue.