我的JavaScript被执行了两次。当我运行Chrome调试器时,我注意到单独的JavaScript文件会在第一次执行代码后,application.js
文件会再次执行代码。
我认为这是因为最近我关闭了预编译,因为我在Heroku上遇到了问题。在此之后,我运行了rake assets:precompile
。
我的JavaScript被执行了两次。当我运行Chrome调试器时,我注意到单独的JavaScript文件会在第一次执行代码后,application.js
文件会再次执行代码。
我认为这是因为最近我关闭了预编译,因为我在Heroku上遇到了问题。在此之后,我运行了rake assets:precompile
。
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不是问题所在(你应该重置所有更改过的内容)。#app/assets/javascripts/application.js
$(document).on("click", ".element", function(){
//your stuff here
});
我们现在总是从 document
元素的 DOM 进行委派。虽然这可能会导致一些资源问题,但我们发现这使得Rails应用程序更加健壮,因为它允许您真正识别页面上的元素。
如果您正在尝试从DOM上的单个对象触发事件,则可能会发现JS会“捕获”事件两次(出于某种原因),从而导致问题。请尝试委派被调用两次的事件
--
函数
最后,您的functions
可能是问题所在。
如果您有任何匿名函数或特定事件的函数,您需要确保它们能够正确调用。您应该使用JS中的页面事件和Turbolinks来实现此目的:
#app/assets/javascripts/application.js
var your_function = function() {
//stuff here
};
$(document).on("page:load ready", your_function);
我曾在一个没有使用turbolinks的Rails 3应用中遇到过同样的问题。通过运行以下命令,我成功地解决了这个问题:
rake assets:clean
我遇到了这个问题,是因为资产管道同时包含了jquery、jquery-ujs和rails-ujs:
//= require jquery
//= require jquery_ujs
//= require rails_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .