Перемещение элементов DOM при изменении размера и нагрузке. Работает только при изменении размера

Question

Я пытаюсь переместить #project-right-content прямо под h1.entry-title как на размер, так и на загрузку. Пока это работает только при изменении размера. Почему он не работает при загрузке?

$(window).on('resize load', function() { 

    if ($(window).width() < 934) { 
     $('#project-right-content').insertAfter('#project-left-content .entry-title'); 
    } else { 
     $('#project-right-content').insertAfter('#project-left-content'); 
    } 

}); 

Вот HTML для того, что я пытаюсь сделать:

<div id="project-wrapper> 
    <div id="project-container"> 
     <div class="post-container"> 
      <div id="project-left-content"> 
       <h1 class="entry-title">Title</h1> <--- after this line | 
       <p>Description goes here.</p>       | 
      </div>              | 
      <div id="project-right-content">  <-- THIS should be moved 
       <div id="slider"> 
        <div id="slides"> 
         <!-- Slide goes here --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Объект window не огнь load события.

Одним из вариантов было бы цепочке .resize() methodпосле слушателя событий для того, чтобы спровоцировать resize событие, когда страница загружена.

Example Here

$(window).on('resize', function() { 
    if ($(window).width() < 934) { 
     $('#project-right-content').insertAfter('#project-left-content .entry-title'); 
    } else { 
     $('#project-right-content').insertAfter('#project-left-content'); 
    } 
}).resize(); // <-- added 

Answer 2

Как я грустно в ответ попробовать это:

jQuery(document).ready(function($) { 

    function resize() { 
    if ($(window).width() < 934) { 
     $('#project-right-content').insertAfter('#project-left-content .entry-title'); 
    } else { 
     $('#project-right-content').insertAfter('#project-left-content'); 
    } 
    } 

    resize(); 

    $(window).on('resize', resize); 

});