Question

所以我有一个按下按钮执行一些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则更少。

Answer 1

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

-

<强> Turbolinks

当您的应用程序运行Turbolinks时，它实际上是为了让您关注的每个支持Turbolinks的链接只呈现所请求页面的<body>，使<head>标签保持原样

<head>代码是<script>代码所在的位置，这意味着调用Turbolinks时不会刷新它们。这似乎不是什么大不了的事;它是。

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

...

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

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

Javascript委托

Turbolinks活动

第一种方法是来自“一致”元素delegate your events（通常为$(document)）。这可以通过将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);

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

2 个答案: