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

Question

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

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

这是我写的代码：

断续器

<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');

})

这是代码笔，表明它在该环境中工作，以及我试图完成的任务。

密码笔

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

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

    ... original code ...

})

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

Answer 1

所以，我发现在Rails 5中使用Turbolinks时，你必须使用Turbolinks事件来确保触发你的javascript代码。我常规的JQuery $（窗口）并不总是能做到这一点。例如，您可以执行以下操作，在初始页面加载后触发一次代码，并在每次Turbolinks访问后再次触发代码。$(&nbsp;document&nbsp;).on('turbolinks:load',&nbsp;function()&nbsp;{ &nbsp;&nbsp;$('.navbar-nav&nbsp;.nav-link').click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$('.navbar-nav&nbsp;.nav-link').removeClass('active'); &nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass('active'); &nbsp;&nbsp;})&nbsp; })涡轮链接 5您可以在此处阅读有关Turbolinks事件的更多信息：Turbolinks Events。有关Turbolinks 5的更多信息，请单击此处：Turbolinks 5。