mar*_*ion 4 javascript jquery ruby-on-rails coffeescript turbolinks
所以我按下了一个按钮来执行一些 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 仅在加载时绑定到元素，这意味着附加到页面的任何新元素都不会与任何事件绑定：
...
这意味着如果您想对应用程序的 JS 执行任何类型的操作，您需要适应<body>标签将不断变化的事实。
为此，您可以使用两种方法：
- Javascript 委托
- Turbolinks 事件
第一种方法是从“一致”元素（通常为）委派您的事件$(document)。这是通过将您的 JS 分配给一个container元素，然后允许它“委托”到您想要的元素来实现的。最好的例子是.on函数：
$(document).on("click", "a", function(){
alert("Clicked");
});
其次，您需要查看Turbolinks 事件挂钩- 这就是您现在正在使用的。这些覆盖了许多标准的 JQuery 函数（例如$(document)），允许您调用您拥有的函数，如下所示：
var your_function = function(){
...
};
$(document).on("page:load ready", your_function);
| 归档时间： |
|
| 查看次数： |
1790 次 |
| 最近记录： |