如何让 Turbolinks 停止干扰我的 JS？
Posted
技术标签:
【中文标题】如何让 Turbolinks 停止干扰我的 JS？【英文标题】：How do I get Turbolinks to stop interfering with my JS? 【发布时间】：2014-10-23 09:10:30 【问题描述】：所以我按下了一个按钮来执行一些 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 就更少了。
【问题讨论】：
嗯，也许禁用涡轮链接？ :) @SergioTulentsev - 除此之外......显然:) 【参考方案1】：你已经有了答案，让我解释一下：
--
Turbolinks
当您的应用程序运行 Turbolinks 时，它实质上是这样，您所关注的每个启用 Turbolinks 的链接只会呈现所请求页面的 <body>，而保持 <head> 标记不变
<head> 标签是您的<script> 标签所在的位置，这意味着它们在调用 Turbolinks 时不会被刷新。这似乎没什么大不了的。是的。
您遇到的问题是 JS 仅在加载时绑定到元素，这意味着附加到页面的任何新元素都不会与任何事件绑定：
...
这意味着，如果您想对应用程序的 JS 执行任何类型的操作，您需要适应 <body> 标记将不断变化的事实。
为此，您可以使用两种方法：
javascript 委托 Turbolinks 事件
第一种方法是从“一致”元素（通常是$(document)）到delegate your events。这是通过将您的 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);
【讨论】：
【参考方案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);
【讨论】：
那个 sn-p 来自 Railscast。那不是我的。我的就在post.js sn-p 的下方。长的。
完美。作品。谢谢！以上是关于如何让 Turbolinks 停止干扰我的 JS？的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 Mapbox GL JS 地图在通过 Turbolinks 首次访问时无法正确显示？
带有 Turbolinks 的 Rails Bootstrap 4