Tive hoje o seguinte problema, criei uma função que verifica o tamanho da janela do browser e se ele for maior que 1300
, o li recebe duas classe e o link (<a>
) dentro dele recebe um evento de mouseover
e mouseout
.
Senão, ele só adiciona três classes ao li
. Chamo essa função no carregamento da página e na função resize do window
para que, quando for redimensionado, também ele verifique o tamanho da janela.
Tudo lindo e tal, porém acontece o problema, quando redimensiono, ele continua com os eventos do li
, mesmo a janela recebendo um novo width
. Mas quando dou refresh com a página menor que o valor de 1300
, ele não recebe o evento de mouseover
e mouseout
.
Alguém tem ideia do motivo disso acontecer?
Segue o codigo:
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());
});