Выпадающее меню jQuery не работает во второй раз

Question

Я использую приложение jQuery в Rails для создания выпадающего меню. Сначала я подумал, что это проблема с цепями. код в моем nav.html.erb файла:

<nav> 
    <%= link_to '#', class: 'toggle' do %> 
    <i class="fa fa-bars"></i> 
    <span>Menu</span> 
    <% end %> 
    <ul class = "menu-items"> 
     <li> 
     <%= link_to root_path do %> 
      <span>Home</span> 
     <% end %> 
     </li> 
     <li> 
     <%= link_to about_path do %> 
      <span>About</span> 
     <% end %> 
     </li> 
     <li> 
     <%= link_to projects_path do %> 
      <span>Projects</span> 
     <% end %> 
     </li> 
     <li> 
     <%= link_to blogs_path do %> 
      <span>Blog</span> 
     <% end %> 
     </li> 
     <li> 
     <%= link_to contact_path do %> 
      <span>Contact</span> 
     <% end %> 
     </li> 
    </ul> 
</nav> 

код в моем файле nav.js является:

$(document).ready(function() { 
    var $switch = $('a.toggle'), 
     $menu = $('nav ul.menu-items'), 
     $icon = $('nav a.toggle i'); 

    $switch.on('click', function(e){ 
    e.preventDefault(); 
    $menu.toggle(function(){ 
    $icon.toggleClass('fa-bars fa-times'); 
    }); 

}); 
}); 

При обновлении страницы, жму меню навигационной панели и ее показывает раскрывающееся меню. Я могу нажать на один из пунктов меню и будет перенаправлен на страницу. На новой странице я снова нажимаю строку меню, и я получаю ее поведение по умолчанию, которое просто добавляет «#» к URL-адресу.

Я думаю, что это имеет какое-то отношение к функции document.ready. При обновлении страницы функция document.ready запускается, но не после перенаправления со страницы, когда я нажимаю элемент меню.

Answer 1

Это связано с тем, что Turbolinks вызывает страницу: изменение события происходит каждый раз, когда нажимается ссылка, и из-за этого он каждый раз пересматривает Javascript. Вот почему он работает сначала, но когда вы меняете страницы, это может привести к дисфункции. Это самая легкая работа для нее.

<script> 
    $('.toggle').dropdown() 
</script> 

Вы также можете добавить data-turbolinks-eval=false к application.html.erb <script> тега, чтобы прервать повторную оценку после нажатия на ссылки.

так:

Изменение <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> в <%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.

Answer 2

Благодаря luissimo, я посмотрел вверх страницы: проблема изменения вы упомянули и нашел решение здесь. Rails 4: how to use $(document).ready() with turbo-links Это приводит меня к рельсам направляющие: Теперь http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works

$(document).on ('turbolinks:load', function() { 
    var $switch = $('a.toggle'), 
    $menu = $('nav ul.menu-items'), 
    $xburger = $('nav a.toggle i'); 

    $switch.on('click', function(e){ 
    e.preventDefault(); 
    $menu.toggle(function(){ 
     $xburger.toggleClass('fa-bars fa-times'); 
    }); 

    }); 
}); 

Моя отзывчивым навигационная панель работает нормально. Это был классический случай RTFM.