Javascript 如何让TurboLink停止干扰我的JS？

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

根据Turbolinks文档，这是正常的-因此我必须进行修改

这部分内容在RailsCast中有介绍，但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');

根据铁路公司的说法，他们的建议如下：

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的经验更少。
如果你使用的是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);

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

--

涡轮链接

当您的应用程序运行Turbolinks时，它基本上会使您遵循的每个启用Turbolinks的链接只呈现请求页面的
，而保留
标记不变

标记是您的
标记所在的位置，这意味着调用TurboLink时它们不会被刷新。这似乎没什么大不了的；是的

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


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

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

Javascript委托
涡轮链接事件
第一种方法是从“一致”元素（通常是
$（document）
）中删除。这是通过将JS分配给
容器
元素，然后允许它将其“委托”给所需的元素来实现的。最好的例子是函数：

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

第二，你会想看看-这是你现在正在使用的。这些函数覆盖了许多标准JQuery函数（例如
$（document）
），允许您按如下方式调用现有函数：

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

嗯，也许禁用涡轮链接？：）@塞尔吉奥图兰采夫——除此之外……显然：）那个片段来自Railscast。那不是我的。我的代码就在
post.js
代码段的正下方。长的，太好了。作品谢谢