Функция загрузки jQuery или функция matchMedia или .css() не работают

Question

Может кто-нибудь помочь и объяснить, почему следующий код не работает? Я не могу понять, почему ... для меня все должно работать.

jQuery(window).load(function($){ 
    if (window.matchMedia("(min-width: 768px)").matches) { 
     var sideHeight = $('.mainContent').css('height'); 
     $('.sidebar').css('height', sideHeight); 
    } 
}); 

Вот jsfiddle только части CSS, которая работает. https://jsfiddle.net/24r9cax6/

Я протестировал часть соответствия медиа, поставив предупреждение в эту функцию, и я мог получить предупреждение, чтобы поп в window.load, но тогда код CSS не работает. Я никогда не мог получить код CSS для запуска на моем веб-сайте и сделать боковую панель той же высоты, что и основной контент. Я положил js в голову и в конец тела. Без изменений.

Сайт построен в WP. Содержимое загружается динамически, поэтому я думал, что он делает высоту до того, как содержимое было загружено, но это то, что должно исправлять window.load(), не так ли?

Вот статья на сайте, которую вы можете проверить. Я хочу, чтобы боковая панель была той же высоты, что и div основного компонента, поэтому серый фон продолжает страницу вниз. Но только на размер и размер планшета (с использованием бутстрапа).

http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/

Answer 1

Вы не можете пройти $ к .load() и он работает, как, когда вы проходите $ к .ready(). Вам необходимо обернуть всю функцию:

(function($){ 

    $(window).load(function(){ 
     if (window.matchMedia("(min-width: 768px)").matches) { 
      var sideHeight = $('.mainContent').css('height'); 
      $('.sidebar').css('height', sideHeight); 
     } 
    }); 

})(jQuery);