所以我有一个按下按钮执行一些JS.但正在发生的事情是它首次加载它所使用的页面,但是一旦我转到另一个页面并按下该新页面上的按钮,它就不起作用了.

根据Turbolinks文档,这是正常的 – 所以我必须进行修改.

这个部分涵盖在这个RailsCast – http://railscasts.com/episodes/390-turbolinks?view=asciicast中 – 但Ryan给出的解决方案是在CoffeeScript中,我使用普通的旧香草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');

Per 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的经验更少.

解决方法:

如果您使用的是JS而不是CoffeeScript,那么为什么准备好了= – >在你的JS文件中？

试试这个.

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