所以我有一个按钮，我按下它可以执行一些 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 的经验更少。
最佳答案
你已经有了答案，让我解释一下:
--
涡轮链接
当您的应用程序运行 Turbolinks 时，它实际上使您跟随的每个支持 Turbolinks 的链接都只会呈现 <body>。请求的页面，留下 <head>标签完好无损
<head>标签是你的 <script>标签驻留，这意味着它们不会在调用 Turbolinks 时刷新。这似乎没什么大不了的；是的。
您遇到的问题是 JS 仅在加载时绑定(bind)到元素，这意味着附加到页面的任何新元素都不会与任何事件绑定(bind):
...
这意味着如果您想使用应用程序的 JS 执行任何类型的操作，您需要适应 <body>标签将不断变化。
为此，您可以使用两种方法:
- Javascript Delegation
- Turbolinks events
第一种方法是delegate your events来自“一致”元素(通常为 $(document) )。这通过将您的 JS 分配给 container 来实现。元素，然后允许它将其“委托(delegate)”给您想要的元素。最好的例子是 .on 功能:
$(document).on("click", "a", function(){
alert("Clicked");
});
其次，您需要查看 Turbolinks event hooks - 这就是你现在使用的。这些覆盖了许多标准的 JQuery 函数(例如 $(document) )，允许您调用您拥有的函数，如下所示:
var your_function = function(){
...
};
$(document).on("page:load ready", your_function);
关于javascript - 如何让 Turbolinks 停止干扰我的 JS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25566867/