Rails 5 Jquery 停止处理重定向答案

【问题标题】：Rails 5 Jquery stops working on redirectRails 5 Jquery 停止处理重定向
【发布时间】：2018-12-09 16:16:10
【问题描述】：

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

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

我花了很多时间玩 jquery，关闭刷新的主页按钮上的 turbolinks，等等。好奇是否有人有办法解决这个问题，或者 rails 5 对这些东西很挑剔。

这是 _index.html.erb 中两个按钮的 sn-p

  <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;
  }

这里是整个 index.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);
    });
});

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

另外我使用 jquery3 有 gem 'jquery-rails', application.js:

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

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

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

提前致谢

【问题讨论】：

如果您将 $(document).ready(...) 替换为支持 TurboLinks 的等效 $(document).on('turbolinks:load', ...)，会发生什么情况？

标签： javascript jquery html ruby-on-rails sass

【解决方案1】：

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

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

如果您想了解有关此行为的更多信息，这里是文档的链接。

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

【讨论】：

感谢您的快速回复和链接。