自定义 javascript 函数在带有 Turbolinks 的 rails 5 中不起作用
Custom javascript function not working in rails 5 with Turbolinks
我是 javascript 的新手,我在让自定义函数在 Rails 5 应用程序中工作时遇到问题。我正在尝试添加一个简单的函数,在 bootstrap 导航栏标题中设置活动 link。我在 codepen 中完成了所有工作,但是当我将它添加到我的 Rails 应用程序时,它无法正常工作。我知道 javascript 是 运行 因为我正在使用 bootstrap 并且这些功能正常工作。我还认为脚本是通过检查 Chrome 开发人员工具中的源代码加载的,它就在那里。但是,设置断点永远不会被触发。
我已经阅读了大约 30 个类似的问题,其中 none 帮助解决了我的问题,所以我真的希望有人能帮我解决这个问题。
这是我写的代码:
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 .
这是代码笔,显示它在那个环境中工作以及我正在努力完成的事情。
更新
所以,我最初的问题是由于 turbolinks,代码在 DOM 之后没有加载。我添加了以下代码,现在它是 运行。
$( document ).on('turbolinks:load', function() {
... original code ...
})
但是,代码并不像我的代码笔中那样 运行。活动 link 未按预期更改。无论 link 是否被点击,最初标记为活动的 link 都会保持活动状态。我丢失的页面是否存在其他加载问题?
因此,我发现在 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. And more on Turbolinks 5 here: Turbolinks 5。
我是 javascript 的新手,我在让自定义函数在 Rails 5 应用程序中工作时遇到问题。我正在尝试添加一个简单的函数,在 bootstrap 导航栏标题中设置活动 link。我在 codepen 中完成了所有工作,但是当我将它添加到我的 Rails 应用程序时,它无法正常工作。我知道 javascript 是 运行 因为我正在使用 bootstrap 并且这些功能正常工作。我还认为脚本是通过检查 Chrome 开发人员工具中的源代码加载的,它就在那里。但是,设置断点永远不会被触发。
我已经阅读了大约 30 个类似的问题,其中 none 帮助解决了我的问题,所以我真的希望有人能帮我解决这个问题。
这是我写的代码:
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 .
这是代码笔,显示它在那个环境中工作以及我正在努力完成的事情。
更新 所以,我最初的问题是由于 turbolinks,代码在 DOM 之后没有加载。我添加了以下代码,现在它是 运行。
$( document ).on('turbolinks:load', function() {
... original code ...
})
但是,代码并不像我的代码笔中那样 运行。活动 link 未按预期更改。无论 link 是否被点击,最初标记为活动的 link 都会保持活动状态。我丢失的页面是否存在其他加载问题?
因此,我发现在 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. And more on Turbolinks 5 here: Turbolinks 5。