jQuery hover после посещения подстраницы

Question

У меня возникла проблема с некоторым кодом jQuery.

Когда я загружаю свою домашнюю страницу, функция slideDown on hover на картинке работает, но когда я посещаю другие подстраницы, а затем возвращаюсь на домашнюю страницу, функция slideDown on hover не работает.

EDIT: Вы можете видеть, что на моей странице: 193.218.134.131:3000

Вот мой код:

$(document).ready(function() { 
    $('.standard').hover(
     function(){ 
      $(this).find('.caption').show(); 
     }, 
     function(){ 
      $(this).find('.caption').hide(); 
     } 
    ); 
    $('.fade').hover(
     function(){ 
      $(this).find('.caption').fadeIn(250); 
     }, 
     function(){ 
      $(this).find('.caption').fadeOut(250); 
     } 
    ); 
    $('.slide').hover(
     function(){ 
      $(this).find('.caption').slideDown('fast'); 
     }, 
     function(){ 
      $(this).find('.caption').slideUp('fast'); 
     } 
    ); 
}); 

<div class="grid-block slide"> 
    <div class="caption"> 
     <h2><%= link_to "About us", about_path %></h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     <p><%= link_to "About us", about_path, :class => 'learn-more' %></p> 
    </div> 
    <%= link_to image_tag("about2.jpg", :class => 'img-rounded img-responsive', :alt => 'test alt'), about_path %> 
    </div> 


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

Почему это не работает должным образом?

Answer 1

Итак, здесь мы идем. Фактически вы вообще не удаляетесь от текущей страницы. Все, что вы делаете, это накладывать нагрузки, соответственно обрабатывать DOM. Это когда ваши события перепутались. Решение, которое вы используете, - event delegation.

От doc: Делегирование события имеет то преимущество, что они могут обрабатывать событие от элементов-потомков, которые добавляются к документу в более позднее время. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий. Этот элемент может быть элементом контейнера представления в дизайне Model-View-Controller, например, или документом, если обработчик события хочет контролировать все события пузырьков в документе. Элемент документа доступен в начале документа перед загрузкой любого другого HTML-кода, поэтому безопасно присоединять туда события, не дожидаясь готовности документа.

Настоящая демоверсия относительно того, как вы можете изменить свой код, чтобы сохранить события неповрежденными при динамическом DOM.

$(document).ready(function() { 
    $(document).on({ 
     'mouseenter': function() { 
      $(this).find('.caption').slideDown('fast'); 
     }, 
     'mouseleave': function() { 
      $(this).find('.caption').slideUp('fast'); 
     } 
    }, '.slide'); 
}); 

Измените другие 2 раздела вашего кода, чтобы они соответствовали вышеуказанной схеме. Надеюсь, это поможет.