自定义javascript函数在带有Turbolink的rails 5中不起作用

Question

我是javascript的新手，但是在使自定义功能在Rails 5应用程序中工作时遇到了问题。我正在尝试添加一个简单的函数，以在引导导航栏标题中设置活动链接。我可以使用Codepen进行所有操作，但是当我将其添加到Rails应用程序时，它无法正常工作。我知道javascript正在运行，因为我正在使用引导程序，并且这些功能可以正常工作。我还认为该脚本是通过检查Chrome Developer工具中的源代码来加载的，并且已经存在。但是，设置断点永远不会触发。

我已经阅读了大约30个类似的问题，但是没有一个问题可以解决我的问题，因此，我真的希望有人能够帮助我克服这个障碍。

这是我写的代码：

HTML

<nav class="navbar navbar-light bg-light navbar-expand-md fixed-top header-bg">
  <%= link_to image_tag(asset_path('jungers_farm/jungers_logo.png'),
                  width: '50', height: '50'),
                 root_path, class:'navbar-brand col-4 menu-brand' %>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
          data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-list-2">
    <ul class="navbar-nav justify-content-center" id="main-nav-list">
      <li class="nav-item">
        <%= link_to 'Home', root_path, class: 'nav-link active' %>
      </li>
      <li class="nav-item">
        <%= link_to 'Training', page_path('training'), class: 'nav-link' %>
      </li>
      <li class="nav-item">
        <%= link_to 'Breeding', page_path('breeding'), class: 'nav-link' %>
      </li>
    </ul>
  </div>
</nav>

Javascript

$('.navbar-nav .nav-link').click(function(){
  $('.navbar-nav .nav-link').removeClass('active');
  $(this).addClass('active');
})

Application.js文件（我的代码在app / assets / javascripts中的custom.js中）

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require custom
//= require_tree .

这里是代码库显示它可以在那种环境下工作以及我要完成的工作。

Codepen

UPDATE因此，我最初的问题是由于turbolinks，代码没有在DOM之后加载。我添加了以下代码，现在它正在运行。

$( document ).on('turbolinks:load', function() {
    ... original code ...
})

但是，代码没有像我的Codepen中那样运行。活动链接未按预期更改。不管单击的链接如何，最初标记为活动的链接都会保持活动状态。我缺少的页面还有其他加载问题吗？

Answer 1

因此，我发现在Rails 5中使用Turbolinks时，必须使用Turbolinks事件来确保触发javascript代码。我常规的JQuery $（window）并非总能解决问题。例如，您可以执行以下操作以在初始页面加载后触发一次代码，并在每次访问Turbolinks之后再次触发代码。

$( document ).on('turbolinks:load', function() {
  $('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
  }) 
})

Turbolinks 5

您可以在此处阅读更多有关Turbolinks事件的信息：Turbolinks Events。还有更多有关Turbolinks 5的信息：Turbolinks 5。