Javascript Materializecss菜单只能在一页上正常工作

我正在Rails应用程序中使用

materialize sass

gem，使用时遇到了一些问题。它只在根（主页）页面和其他一些页面上运行良好，但不能在整个站点上运行

。按钮折叠

将失去功能，菜单不起作用。我只需点击它，或点击（在移动设备中），什么也没发生。有时它在页面刷新后工作，有时不工作。总是在点击

后。按钮折叠到url添加
#最后（逻辑上可以理解），除了根（主页）页面。
我认为这可能是jQuery的问题，但我在
assets/javascripts/application.js
中初始化了折叠按钮，如下所示：

$(function() {
  $(".button-collapse").sideNav();
});

就像官方指南一样。我还尝试使用
document.ready
。我的所有相关代码都位于
application.html.erb
中，如下所示：

    <header>
      <div class="row">
        <nav class="col s12 nav-wrapper">
          <%= link_to 'Blog', root_path, class: 'brand-logo' %>
          <a href="#!" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
          <ul class="right hide-on-med-and-down">
            <% if user_signed_in? %>
              <li>
                <%= "Hello, #{current_user.username}" %>
              </li>
              <li>
                <%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
              </li>
            <% else %>
              <li>
                <%= link_to 'Sign in', new_user_session_path %>
              </li>
              <% end %>
          </ul>
          <ul class="side-nav" id="mobile-demo">
            <% if user_signed_in? %>
              <li>
                <%= "Hello, #{current_user.username}" %>
              </li>
              <li>
                <%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
              </li>
            <% else %>
              <li>
                <%= link_to 'Sign in', new_user_session_path %>
              </li>
            <% end %>
          </ul>
        </nav>
      </div>
    </header>


















当我在Rails项目中使用TurboLink时，我需要一种方法来处理它们。只需添加gem和以下代码：
/=requirejquery.turbolinks
就可以解决这个问题。
此外，通过添加以下内容，还有许多简单的解决方法：

$(document).on('ready page:change', function() {
  Waves.displayEffect(); // Initialize buttons wave effects
 $(".button-collapse").sideNav(); // Initialize collapse button
});

浏览器控制台中是否有JS错误？