Rails 5 Jquery停止重定向

Question

所以我正在使用Rails 5.1创建一个Web应用程序，并且我正在使用CSS复选框hack来打开导航菜单。

我有一个按钮(在root_path上(，单击该按钮时，使用 Jquery 从另一个区域选中该框。它在转到该页面时有效，但是当我重定向到另一个页面时，它停止工作。但是当我单击按钮记录复选框是否选中时，控制台仍然输出真/假。因此，按钮功能似乎在单击时工作，但复选框未显示为选中状态。

我花了很多时间玩jquery，关闭刷新主页按钮上的涡轮链接等。 好奇是否有人有办法解决这个问题，或者 rails 5 是否对此内容挑剔。

这是 _index.html.erb 中两个按钮的代码片段

<div class="index__content--buttons">
<%= link_to("Find Out More", root_path, :class => "btn btn--primary", data: { no_turbolink: true }) %>
<%= link_to("Explore the Culture", "javascript:void(0)", :class => "btn btn--primary", :id => "navbtn") %>
</div>

这是我的_nav.scss的代码：

// functionality of nav box
&__checkbox:checked ~ &__background {
transform: scale(60);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
z-index: 1500;
}
&__checkbox:checked ~ &__nav > &__list > &__item {
visibility: visible;
}

这是整个索引.js

$(document).ready(function() {
const navigation = document.querySelector('.navigation');
const navCheckbox = 
navigation.querySelector('.navigation__checkbox');
const navItems = navigation.querySelectorAll('.navigation__item');
navCheckbox.checked = false;
function uncheck(){ $(navCheckbox).prop('checked', false) }
navItems.forEach(item => item.addEventListener("click", _ => 
navCheckbox.checked = false));
$(document).on("click", "#navbtn", function (){
uncheck();
console.log(navCheckbox['checked'] === true);
$(navCheckbox).prop('checked', true);    
console.log(navCheckbox['checked'] === true);
});
});

值得注意的是，实际的复选框按钮和标签始终有效。并且循环的导航项是在单击导航链接后取消选中。

我也在使用jquery3有gem'jquery-rails'，应用程序.js：

//= require jquery3
//= require jquery_ujs
//= require turbolinks
//= require_tree .

那么为什么这在root_path重定向上失败呢？ 编辑：刚刚测试，在任何重定向后都不起作用。

TLDR：jQuery在第一次访问时工作。然后不选中任何重定向上的复选框(但记录正确的状态(。

提前致谢

Answer 1

这可能是因为您启用了 Turbolinks，这需要特殊使用导航事件，而不是使用 jQuery ready 事件，您需要使用如下turbolinks:load：

document.addEventListener("turbolinks:load", function() {
// Here goes your jQuery ready code
})

如果您想了解有关此行为的更多信息，请参阅文档的链接。

https://github.com/turbolinks/turbolinks#installing-javascript-behavior