自定义 javascript function 不适用于带有 Turbolinks 的 rails 5

Question

I'm new to javascript and I'm having issues getting a custom function to work in a Rails 5 app. I'm trying to add a simple function that sets an active link in a bootstrap navbar heading. I got everything to work in a codepen but when I add it to my Rails app it's not working. I know javascript is running because I'm using bootstrap and those functions work properly. I also think the script is loading by checking the sources in Chrome Developer tools and it is there. However, setting a breakpoint never gets triggered.

I've read through about 30 similar questions and none of them helped fix my issue, so I'm really hoping someone can get me past this roadblock.

Here is the code I wrote:

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 file (my code is in custom.js in app/assets/javascripts)

// 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 .

Here is the codepen showing that it works in that environment and what I'm trying to accomplish.

Codepen

UPDATE So, my initial problem was the code was not loading after the DOM because of turbolinks. I added the following code and now it is running.

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

However, the code is not running as it does in my codepen. The active link is not changing as expected. The link that was originally marked as active stays active regardless of the link clicked. Is there some other load issue for the page I'm missing?

Answer 1

So, I discovered that when using Turbolinks in Rails 5 you have to use a Turbolinks event to ensure you trigger your javascript code. I regular JQuery $(window) doesn't always do the trick. For example you can do the following to trigger your code once after the initial page load, and again after every Turbolinks visit.

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

Turbolinks 5

You can read more on the Turbolinks events here: Turbolinks Events . And more on Turbolinks 5 here: Turbolinks 5 .