Rails 4:如何在涡轮链接中使用$(document).ready()

I ran into an issue in my Rails 4 app while trying to organize JS files "the rails way". They were previously scattered across different views. I organized them into separate files and compile them with the assets pipeline. However, I just learned that jQuery's "ready" event doesn't fire on subsequent clicks when turbo-linking is turned on. The first time you load a page it works. But when you click a link, anything inside the ready( function($) { won't get executed (because the page doesn't actually load again). Good explanation: here.

所以我的问题是:什么是确保jQuery事件在涡轮链接打开时正常工作的正确方法?您是否将脚本包装在特定于rails的侦听器中?或者也许rails有某种魔力，使它变得不必要?文档对这应该如何工作有点模糊，特别是关于通过manifest(s)加载多个文件，如application.js。

当前回答

最近，我发现了一种最简单易懂的处理方法:

$(document).on 'ready page:load', ->
  # Actions to do

$(document).on('ready page:load', function () {
  // Actions to do
});

编辑如果您已经将事件委托给文档绑定，请确保将它们附加在ready函数之外，否则它们将在每个页面上反弹:load事件(导致相同的函数多次运行)。例如，如果你有这样的电话:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

将它们从ready函数中取出，像这样:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

绑定到文档的委托事件不需要绑定到就绪事件上。

2013-11-07 11:01:10

其他回答

以下是我所做的，以确保事情不会执行两次:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

我发现使用jquery-turbolinks gem或组合$(document)。Ready和$(document).on("page:load")或使用$(document).on("page:change")本身的行为会出乎意料——尤其是在开发过程中。

2015-03-19 07:51:49

首先，安装jquery-turbolinks gem。然后，不要忘记将包含的Javascript文件从application.html.erb的body末尾移动到它的<head>。

如本文所述，如果出于速度优化的原因将应用程序javascript链接放在页脚中，则需要将其移动到标记中，以便它在标记中的内容之前加载。这个解决方案对我很有效。

2016-06-21 09:58:11

我发现当使用ready和turbolinks的函数时，我的函数翻了一番:load，所以我使用，

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

这样，如果支持涡轮链接，您的函数就不会加倍!

2019-10-10 06:13:51

测试了这么多的解决方案，终于得出了这个结论。你的代码肯定不会被调用两次。

var has_loaded = false; Var ready = function() { 如果(! has_loaded) { has_loaded = true; // YOURJS ｝｝ $(文档)时(准备); 美元(文档)。绑定(“页面:改变”,准备);

2016-07-01 10:04:14

以上这些都不适合我，我没有使用jQuery的$(document)来解决这个问题。ready，但使用addEventListener代替。

document.addEventListener("turbolinks:load", function() {
  // do something
});

2016-09-13 12:05:45

Rails 4:如何在涡轮链接中使用$(document).ready()

推荐文章

最新文章

标签