Media Queries in jQuery not worked

$(window).on('load', function() { 
  checkMedia(); 
}); 
$(window).on('resize', function() { 
  checkMedia(); 
}); 
 
function checkMedia() { 
 
  console.log('work') 
 
  var headerCart = $('.header__cart'); 
 
  if (window.matchMedia('(max-width: 992px)').matches) { 
 
    console.log('work max-width: 992px') 
 
    headerCart.mouseenter(function() { 
      $('.header__cart > .title').fadeOut(0); 
      $('.header__cart > .img').fadeOut(0); 
      $('.header__cart > .sum').fadeOut(0); 
      $('.header__cart > .content').fadeIn(200); 
      $('.header__cart > .button').fadeIn(0); 
    }); 
 
    headerCart.mouseleave(function() { 
      $('.header__cart > .content').fadeOut(0); 
      $('.header__cart > .button').fadeOut(0); 
      $('.header__cart > .title').fadeIn(200); 
      $('.header__cart > .img').fadeIn(200); 
      $('.header__cart > .sum').fadeIn(200); 
    }); 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>