2015-07-29 2 views
1

У меня есть плавающее изображение с ссылкой на изображение, вы можете перейти на главную страницу, и когда вы наведите курсор на него, над ним появится значок «Уменьшить», чтобы вы могли свести к минимуму это изображение и переместите его в панель навигации. Это плавающее фиксированное изображение используется во всех представлениях, оно находится в файле application.html.erb. HTML выглядит так:Rails 4: javascript не работает после первого обновления

<div class="col-sm-12 profile-float-container"> 
    <div class="profile-float-wrapper"> 
     <span class="glyphicon glyphicon-zoom-out minimize"></span> 
     <a href="/"> 
      <img class="img-circle profile-nav-img" src="/system/users/avatars/000/000/004/small/dog.jpg?1438125939" alt="Dog"> 
     </a> 
    </div> 
</div> 

Это работает. Однако, когда это происходит, javascript полностью отключен после перехода на любую другую страницу в приложении.

Это JavaScript, расположенный в application.js:

$(function() { 
    $('.minimize').on('click', function() { 
     $('.profile-float-wrapper').fadeOut(); 
     $('.profile-nav-li').fadeIn(); 
    }); 

    $('div, span').on('click', function() { 
     alert($(this).attr('class')); 
    }); 
}); 

Чтобы объяснить, что происходит, когда первый плавающее изображение щелкают оповещения выскочить, и, конечно, работа эффекты. Однако после этого при навигации по приложению, нажимая любой div или span, не срабатывает какое-либо предупреждение. Это похоже на то, что javascript не загружается.

ответ

3

Звучит так, может быть, Turbolinks мешает. Поскольку документ не перезагружен Turbolinks, $(document).ready(function(){}) (или ваша сокращенная версия $(function(){})) не запускается. Вам также нужно подключиться к событию загрузки страницы Turbolinks.

var ready; 
ready = function() { 
    $('.minimize').on('click', function() { 
     $('.profile-float-wrapper').fadeOut(); 
     $('.profile-nav-li').fadeIn(); 
    }); 

    $('div, span').on('click', function() { 
     alert($(this).attr('class')); 
    }); 
}; 

$(document).ready(ready); 
$(document).on('page:load', ready); 

Подробнее о событиях Turbolinks можно узнать здесь https://github.com/rails/turbolinks#events.

Turbolinks автоматически включается в новые проекты Rails 4, поэтому, скорее всего, это вызывает проблемы. Добавьте data-no-turbolink в свой тег <body>, если вы хотите полностью его отключить, или выполните следующие действия, чтобы полностью удалить.

  1. Удалить gem "turbolinks" из вашего Gemfile и установить пакет.
  2. Удалить //= require turbolinks from application.js
  3. Удалите все data-turbolinks-track атрибутов в своих макетах.
Смежные вопросы