如何让 Turbolinks 停止干扰我的 JS？

Question

所以我按下了一个按钮来执行一些 JS。但是发生的事情是在第一次加载页面时它可以工作，但是一旦我转到另一个页面并按下该新页面上的按钮，它就不起作用了。

根据 Turbolinks 文档，这是正常的 - 所以我必须进行修改。

这在 RailsCast - http://railscasts.com/episodes/390-turbolinks?view=asciicast 中有部分内容 - 但 Ryan 提供的解决方案是在 CoffeeScript 中，我使用的是普通的老式 vanilla JS。

这是我的posts.js 文件：

$(function(){

    var toggleSidebar = $("#togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

    toggleSidebar.on("click", function(){

        if(primary.hasClass("col-sm-9")){
            primary.removeClass("col-sm-9");
            primary.addClass("col-sm-12");
            secondary.css('display', 'none');
        }
        else {
            primary.removeClass("col-sm-12");
            primary.addClass("col-sm-9");
            secondary.css('display', 'inline-block');
        }
    });

});


$(document).on('page:load');

根据 RailsCasts，这是他们的建议：

ready = ->
  $('.edit_task input[type=checkbox]').click ->
    $(this).parent('form').submit()

$(document).ready(ready)
$(document).on('page:load', ready)

当我在posts.js 的底部尝试这个时：

$(document).ready();
$(document).on('page:load', ready());

我收到此错误：

Uncaught ReferenceError: ready is not defined 

关于如何获得这个的想法？我很确定这很简单，但我的 JS 经验很少，CoffeeScript 就更少了。

Answer 1

你已经有了答案，让我解释一下：

--

Turbolinks

当您的应用程序运行 Turbolinks 时，它实质上是这样，您所关注的每个启用 Turbolinks 的链接只会呈现所请求页面的 <body>，而保持 <head> 标记不变

<head> 标签是您的<script> 标签所在的位置，这意味着它们在调用 Turbolinks 时不会被刷新。这似乎没什么大不了的。是的。

您遇到的问题是 JS 仅在加载时绑定到元素，这意味着附加到页面的任何新元素都不会与任何事件绑定：

...

这意味着，如果您想对应用程序的 JS 执行任何类型的操作，您需要适应 <body> 标记将不断变化的事实。

为此，您可以使用两种方法：

1. Javascript 委托
2. Turbolinks 事件

第一种方法是从“一致”元素（通常是$(document)）到delegate your events。这是通过将您的 JS 分配给 container 元素，然后允许它“委托”到您想要的元素来实现的。最好的例子是.on 函数：

$(document).on("click", "a", function(){
  alert("Clicked");
});

其次，您需要查看Turbolinks event hooks - 这就是您现在正在使用的。这些覆盖了许多标准的 JQuery 函数（例如$(document)），允许您调用您拥有的函数，如下所示：

var your_function = function(){
  ...
};
$(document).on("page:load ready", your_function);

Answer 2

如果您使用的是 JS，而不是 CoffeeScript，为什么您的 JS 文件中有 ready = ->？

试试这个。

var ready;
ready = function() {
  $('.edit_task input[type=checkbox]').click(function() {
    $(this).parent('form').submit();
  });
};

$(document).ready(ready);
$(document).on('page:load', ready);

在你的情况下：

var ready;    
ready = function() {

    var toggleSidebar = $("#togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

    toggleSidebar.on("click", function(){

        if(primary.hasClass("col-sm-9")){
            primary.removeClass("col-sm-9");
            primary.addClass("col-sm-12");
            secondary.css('display', 'none');
        }
        else {
            primary.removeClass("col-sm-12");
            primary.addClass("col-sm-9");
            secondary.css('display', 'inline-block');
        }
    });

};

$(document).ready(ready);
$(document).on('page:load', ready);