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

我是javascript新手，在Rails 5应用程序中使用自定义函数时遇到问题。我试图添加一个简单的函数，在引导导航栏标题中设置一个活动链接。我在一个代码笔中得到了所有可以工作的东西，但是当我把它添加到我的Rails应用程序中时，它就不工作了。我知道javascript正在运行，因为我使用的是引导程序，这些函数工作正常。我还认为脚本是通过检查Chrome开发者工具中的源代码来加载的，它就在那里。但是，设置断点永远不会被触发

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

以下是我编写的代码：

HTML

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

下面是代码笔，它显示了它在那种环境下工作，以及我正在努力实现的目标

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

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

---

但是，代码并不像在我的代码笔中那样运行。活动链接未按预期更改。无论单击了哪个链接，最初标记为活动的链接都将保持活动状态。我丢失的页面是否还有其他加载问题？

因此，我发现在Rails 5中使用Turbolinks时，必须使用Turbolinks事件来确保触发javascript代码。我认为普通JQuery$（窗口）并不总是这样。例如，您可以执行以下操作，在初始页面加载后触发代码一次，在每次Turbolinks访问后再次触发代码

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

涡轮链路5

---

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

您确定您的javascript是在dom加载完成后加载的吗？在单击处理程序的前面和内部放置一个

控制台.log

，查看打印的是哪一个。如果只是第一个，您的javascript在构建dom之前就已经运行了。但是，它并不像在代码笔中那样工作。在脚本运行后，它几乎看起来像是被更改回原始（页面重新加载），这是可能的吗？或者CSS未应用于已编辑的更改？我想我不确定Rails中事件的顺序。

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

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

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