Bug en javascript événement/rails app

Question

Je bug étrange dans le code JS. Après avoir traduit la page dans une autre langue en cliquant sur "English | Русский" avec simple I18n traduire mes boutons de menu ne fonctionnent pas jusqu'à ce que je recharge la page. Je pense raison - est le code JS responsable du défilement des menus. Mais je ne comprends pas la vraie raison.

<!-- start-smoth-scrolling--> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $(".scroll").click(function(event){ 
     event.preventDefault(); 

    $('html,body').animate({scrollTop:$(this.hash).offset().top},1000); 
     }); 
    }); 
</script> 
<!--//end-smoth-scrolling--> 



<!--banner--> 
     <div id="home" class="banner"> 
     <div class="banner-info"> 
      <div class="banner-top"> 
      <div class="container"> 
       <div class="col-md-6 banner-top-left wow slideInDown animated" data-wow-delay=".5s"> 
       <ul class="social-icons"> 
        <li><a href="#"> </a></li> 
        <li><a href="#" class="fb"> </a></li> 
        <li><a href="#" class="in"> </a></li> 
        <li><a href="#" class="dott"> </a></li> 
       </ul> 
       </div> 
       <div class="col-md-6 banner-top-right wow slideInDown animated" data-wow-delay=".5s"> 
       <p><span class="glyphicon glyphicon-earphone"></span> +7 978 887 34 61 </p> 
       <p><%= link_to_unless_current "English", locale: "en" %> | <%= link_to_unless_current "Русский", locale: "ru" %></p> 
       </div> 
       <div class="clearfix"> </div> 
      </div> 
      </div> 
      <div class="banner-text"> 
      <h1 class="wow slideInLeft animated" data-wow-delay=".5s"><%= t "banner.title" %></h1> 
      <p class="wow slideInRight animated" data-wow-delay=".5s"><%= t "banner.description" %></p> 
      </div> 
      <!--navigation--> 
      <div class="top-nav wow"> 
      <div class="container"> 
       <div class="navbar-header logo"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><%= t "navigation.menu" %> 
       </button> 
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <div class="menu"> 
        <ul class="nav navbar"> 
        <li class="menu-item menu-item-current"><a href="#home" class="menu-link scroll"><%= t "navigation.home" %></a></li> 
        <li class="menu-item"><a href="#about" class="menu-link scroll"><%= t "navigation.about" %></a></li> 
        <li class="menu-item"><a href="#services" class="menu-link scroll"><%= t "navigation.services" %></a></li> 
        <li class="menu-item"><a href="#work" class="menu-link scroll"><%= t "navigation.works" %></a></li> 
        <li class="menu-item"><a href="#gallery" class="menu-link scroll"><%= t "navigation.gallery" %></a></li> 
        <li class="menu-item"><a href="#contact" class="menu-link scroll"><%= t "navigation.contact" %></a></li> 
        </ul> 
       </div> 
       <div class="clearfix"> </div> 
       <script> 
        (function() { 
        [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) { 
         var menuItems = menu.querySelectorAll('.menu-link'), 
         setCurrent = function(ev) { 
          ev.preventDefault(); 

          var item = ev.target.parentNode; // li 

          // return if already current 
          if(classie.has(item, 'menu-item-current')) { 
          return false; 
          } 
          // remove current 
          classie.remove(menu.querySelector('.menu-item-current'), 'menu-item-current'); 
          // set current 
          classie.add(item, 'menu-item-current'); 
         }; 

         [].slice.call(menuItems).forEach(function(el) { 
         el.addEventListener('click', setCurrent); 
         }); 
        }); 
        })(window); 
       </script> 
       </div> 
       <!-- script-for sticky-nav --> 
       <script> 
       $(document).ready(function() { 
       var navoffeset=$(".top-nav").offset().top; 
       $(window).scroll(function(){ 
        var scrollpos=$(window).scrollTop(); 
        if(scrollpos >=navoffeset){ 
        $(".top-nav").addClass("fixed"); 
        }else{ 
        $(".top-nav").removeClass("fixed"); 
        } 
       }); 

       }); 
       </script> 
       <!-- /script-for sticky-nav --> 
      </div> 
      </div> 
      <!--//navigation--> 
     </div> 
     </div> 
     <!--//banner--> 

Answer 1

Je trouve la solution dans cette question JQuery gets loaded only on page refresh in Rails 4 application La question était de l'actif des turbolinks. JS ne fonctionne que lorsque je recharge la page. Merci à Ian et sa réponse.

supprimer // = nécessitent turbolinks des actifs/JavaScripts/application.js fichier:

ajouter bijou 'jquery-turbolinks' dans votre Gemfile

et ceci à vos actifs/JavaScripts/application.js fichier :

// = require jquery.turbolinks