JQuery只在Rails 4應用程序的頁面刷新中加載

我創建了Rails 4應用程序，併爲圖像彈出效果添加了fancybox庫。它工作正常，但只有當頁面正在刷新。如果頁面沒有被用戶刷新，那麼jquery根本不起作用。我試着用小jquery方法來測試它，但所有的工作只能在頁面刷新後進行。我也使用twitter bootstrap。JQuery只在Rails 4應用程序的頁面刷新中加載

我的資產/ application.js中的文件：

//= require jquery 
//= require jquery_ujs 
//= require fancybox 
//= require twitter/bootstrap 
//= require turbolinks 
//= require_tree . 


$(document).ready(function() { 
    $(".fancybox").fancybox(); 
    $("#hand").click(function(){ 
    if($("#check6").is(':visible')) 
    { 
     $("#check6").hide(); 
     } 
    else 
    { 
     $("#check6").show(); 
     } 
    }); 
});

來源

2013-07-26 vishB

是否在第一頁上加載工作，當你點擊另一個鏈接是不？我認爲你有一個turbolinks庫的問題。從你的'assets/javascript/application.js'文件中刪除這行（第5行，'// = require turbolinks'），並且讓我知道:) – Ian

嘿，你的技巧奏效，js加載正常。但是，我以後會不會需要渦輪增壓器呢？ – vishB

我很驚訝，這不是一個更可見/討論的主題......這是常見的使用jQuery以及Turbolinks – mmcrae

180

好吧，我想我明白你的問題，足以提供一個答案。關於使用turbolinks的事情是，大多數綁定到文檔就緒事件的插件和庫停止工作，因爲turbolinks阻止瀏覽器重新加載頁面。有一些技巧來解決這些問題，但解決它的最簡單方法是使用jquery.turbolinks。

要使用它，只需添加到您的Gemfile：

gem 'jquery-turbolinks'

，並給你的assets/javascripts/application.js文件：

//= require jquery.turbolinks

，你應該是好去。

FYI：你並不真的需要向使用turbolinks，但它是有用的，它使請求更快通過避免刷新整個頁面。 Turbolinks通過AJAX獲取您點擊的鏈接內容並將其呈現在同一頁面上，從而消除重新加載資源（JS和CSS）的開銷。嘗試使您的網頁與它一起工作。使用前一段中的庫，我沒有真正的問題。您網頁上的CSS和JS越多，使用turbolinks所獲得的改進就越大。

來源

2013-07-29 13:02:54 Ian

感謝伊恩的幫助和特殊信息 – vishB

我有這個確切的問題，你釘了它，謝謝伊恩。我認爲，jquery沒有綁定我的事件監聽器到link_to重定向後的頁面，而只在頁面加載。 –

你不止歡迎:) – Ian

伊恩有一個很好的答案，而這一次是一個附加的排序到（SO不會讓我真正在寫的時候向任何人發表評論。）

的從https://github.com/rails/turbolinks/#jqueryturbolinks：

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js: 

//= require jquery.turbolinks

之前我沒有在列表中的正確位置添加require jquery.turbolinks，所以它有點挑剔。然後我添加了這個新的方法，我希望它能更好地工作。

來源

2014-03-13 08:21:15 CodeWalrus

+1爲額外的信息，我的鏈接仍然不工作，直到我看到你的答案。 – pob21

在我遵循CodeWalrus和Ian的答案之前，我無法繼續工作，但對我而言，還有更多。如the jquery.turbolinks Readme所述，訂單必須非常具體。

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
// 
// ... your other scripts here ... 
// 
//= require turbolinks

此外，as described here，如果你已經把應用程序的JavaScript鏈接在頁腳速度優化的原因，因爲我有，你需要將它移動到<head>標記，使其在內容前加載<body>標記。

來源

2015-05-21 17:36:22 Karen

這對我有用。看起來必須將包含的javascrip文件移到頭部。 –

Turbolinks是這裏的問題。在軌道中添加了Tollolink以提高網頁的性能。我有這個解決方案工作

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

富勒更多詳情，請參閱this

來源

2015-12-02 17:09:06 Unicornz

JQuery只在Rails 4應用程序的頁面刷新中加載

回答

相關問題