Javascript event/rails 应用出现意外结果

Question

我在 JS 代码中有一个奇怪的错误。在我通过简单的 I18n 翻译单击“英语 | Русский”将页面翻译成另一种语言后，我的菜单按钮在我重新加载页面之前不起作用。我认为原因 - 是负责菜单滚动的 JS 代码。但是我不明白真正的原因。

<!-- 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

我找到了这个问题的答案JQuery gets loaded only on page refresh in Rails 4 application 问题出在 turbolinks 资产上。 JS 仅在我重新加载页面时才起作用。感谢 Ian 和他的回答。

从 assets/javascripts/application.js 文件中删除 //= 需要 turbolinks:

在您的 gem 文件中添加 gem 'jquery-turbolinks'

并将此添加到您的 assets/javascripts/application.js 文件：

//= 要求 jquery.turbolinks

Javascript event/rails 应用出现意外结果

Unexpected result in Javascript event/rails app

html

javascript

dom-events

rails-i18n

ruby-on-rails-4