Rails資產管道：JavaScript被執行兩次

Question

我的JavaScript正在執行兩次。 當我運行Chrome調試器時，我注意到單個JavaScript文件將在第一次執行代碼，然后， application.js文件將再次執行代碼。

我相信這種情況正在發生，因為我最近關閉了預編譯，因為我遇到了Heroku的問題。 在此之后我運行了rake assets:precompile 。

Answer 1

Turbolinks

您可能對Turbolinks存在問題（考慮到您已將其包含在資產管道中）; 雖然這可能不是問題。

Turbolinks旨在通過使用ajax加載新頁面的<body>標記來加快頁面加載時間，保持<head>標記完好無損。 這是為了讓您的應用程序只加載它需要的HTML，但是在頁面上搞亂了JS。

如果你的JS被解雇了兩次，那么可能表明Turbolinks正在干擾你的JS。 因為您沒有在logs包含任何示例，所以我將無法向您提供任何具體信息，但您應該能夠通過從layout和application清單JS文件中刪除turbolinks來測試它：

#app/views/layouts/application.html.erb
= javascript_include_tag "application", "data-turbolinks-track" => false

#app/assets/javascripts/application.js
//= require turbolinks -> remove this line

如果這樣做，請重新啟動服務器並重新加載相關頁面。 如果它仍然帶有錯誤的功能，這意味着Turbolinks不是問題（你應該重置你改變的所有東西）

-

活動

您可能遇到的另一個問題是您如何調用/觸發事件。 這可能有很多原因，但你一定要看看你如何調用你的JS：

#app/assets/javascripts/application.js
$(document).on("click", ".element", function(){
    //your stuff here
});

我們現在總是從DOM的document元素委托。 雖然這可能會導致一些資源問題，但我們發現它使得Rails應用程序在Asset Pipeline中更加強大，因為它允許您真正識別頁面上的元素。

如果您嘗試從DOM上的單個對象觸發事件，您可能會發現JS將“捕獲”事件兩次（無論出於何種原因），從而導致您的問題。 嘗試委派兩次被調用的事件

-

職能

最后，您的functions可能是問題。

如果您有任何匿名函數或特定事件的函數，則需要確保它們能夠被正確調用。 您應該通過在JS和Turbolinks中使用頁面事件來完成此操作：

#app/assets/javascripts/application.js
var your_function = function() {
    //stuff here
};

$(document).on("page:load ready", your_function);

Answer 2

我在沒有使用turbolinks的rails 3應用程序上遇到了同樣的問題。 我能夠通過運行來修復它：

rake assets:clean

這個鏈接幫助了我： Jquery Rails 3 ...表單提交兩次...刪除兩次......幫助

Answer 3

我遇到了這個問題，因為資產管道包括jquery，jquery-ujs和rails-ujs：

 //= require jquery //= require jquery_ujs //= require rails_ujs //= require bootstrap //= require turbolinks //= require_tree .

刪除rails_ujs，一切都很好。

Rails資產管道：JavaScript被執行兩次

問題描述

3 個解決方案

解決方案1
10 2014-07-08 06:50:13

解決方案2
1 2015-11-05 12:20:07

解決方案3
1 2017-08-06 23:41:45

Rails資產管道：JavaScript被執行兩次

問題描述

3 個解決方案

解決方案1 10 2014-07-08 06:50:13

解決方案2 1 2015-11-05 12:20:07

解決方案3 1 2017-08-06 23:41:45

解決方案1
10 2014-07-08 06:50:13

解決方案2
1 2015-11-05 12:20:07

解決方案3
1 2017-08-06 23:41:45