Window resizing and mouseover and mouseout events

Question

I had the following problem today, I created a function that checks the size of the browser window and if it is larger than 1300, the li gets two class and the link (<a>) within it receives an event of mouseover and mouseout.

Otherwise, it only adds three classes to the li. I call this function in page loading and resize function window so that when resized, it also checks the size of the window.

Everything beautiful and such, but the problem happens, when I resize, it continues with the events of li, even the window receiving a new width. But when I refresh with the page less than the value of 1300, he does not receive the event of mouseover and mouseout.

Does anyone have any idea why this is happening?

Follow the code:

var areaRestrita = function(larguraJanela) {

    if(larguraJanela > 1300) {

        $('#menu-item-7436').addClass('barra-lateral-area-restrita-default area-restrita-default')
        .removeClass('area-restrita');

        $('#menu-item-7436>a').mouseover(function(v){

            $('#menu-item-7436')
            .removeClass('barra-lateral-area-restrita-default area-restrita-default')
            .addClass('barra-lateral-area-restrita area-restrita');
        });

        $('#menu-item-7436>a').mouseout(function(v){

            $('#menu-item-7436')
            .removeClass('barra-lateral-area-restrita area-restrita')
            .addClass('barra-lateral-area-restrita-default area-restrita-default');

        });

    } else {

        $('#menu-item-7436').addClass('area-restrita')
        .removeClass('barra-lateral-area-restrita barra-lateral-area-restrita-default area-restrita-default')
    }

}

areaRestrita($(window).width());

$(window).resize(function(){

    areaRestrita($(window).width());
});

Answer 1

The problem is that the events of mouseover and mouseout when the window gets smaller, otherwise they stay there.

This is done through the function unbind jquery.

In your code would enter the part of else and would look like this:

else {

    $('#menu-item-7436').addClass('area-restrita')
    .removeClass('barra-lateral-area-restrita barra-lateral-area-restrita-default area-restrita-default');

    $('#menu-item-7436>a').unbind("mouseover"); //desligar o hover in
    $('#menu-item-7436>a').unbind("mouseout"); //desligar o hover out
}