Rails中的JQuery在从另一个页面链接后失败,适用于页面加载

我在我的主页上有一个引用旋转器。 当我直接从浏览器加载页面(在浏览器中键入地址并按Enter键)它工作正常..但是,如果我点击链接到我的网站中的另一个页面,然后链接回到它停止工作。 更具体地说,引号开始重叠,几乎就好像该方法的两个实例正在运行一样。

我认为这可能是javascript如何加载的问题。 由于我在网站的另一个页面上有一个标签脚本,它会加载正常,但如果我链接并返回页面它不再有效…

在控制台中没有收到任何错误。

我在Ubuntu 12上运行Rails 4,Ruby 2.0.0,Foundation,并使用WebBrick进行测试。 Gemfile发布在下面:

source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.0.0' # Use mysql as the database for Active Record gem 'mysql2' # Use SCSS for stylesheets gem 'sass-rails', '~> 4.0.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~> 4.0.0' # See https://github.com/sstephenson/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby #gem 'nokogiri' '~> 1.5.10' # Use jquery as the JavaScript library gem 'jquery-rails' gem 'activerecord-session_store', github: 'rails/activerecord-session_store' gem 'activemerchant' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' gem 'ransack' gem 'xml-simple' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 1.2' gem 'zurb-foundation' group :doc do # bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', require: false end # Use ActiveModel has_secure_password # gem 'bcrypt-ruby', '~> 3.0.0' # Use unicorn as the app server # gem 'unicorn' # Use Capistrano for deployment gem 'capistrano', group: :development # Use debugger # gem 'debugger', group: [:development, :test] 

脚本:

  function rotateQuotes() { var oCurQuote = $('#quotes div.current'); var oNxtQuote = oCurQuote.next(); if (oNxtQuote.length == 0) oNxtQuote = $('#quotes div:first'); oCurQuote.removeClass('current').addClass('previous'); oNxtQuote.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, {duration: 4500}, function() { oCurQuote.removeClass('previous');}); oCurQuote.animate({opacity: 0.0}, {duration: 500}); }; $(function(){ setInterval(rotateQuotes, 5000); }); 

的application.js

 // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // // //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . 

我猜这与Turbolinks有关。 从精细手册 :

活动

使用Turbolinks页面将在没有完全重新加载的情况下更改,因此您不能依赖DOMContentLoadedjQuery.ready()来触发代码。 相反,Turbolinks会在document上触发事件,以便为页面的生命周期提供挂钩。

AFAIK,Rails4默认启用turbolinks(你在你的application.js有它)所以$(function() { ... })在更改页面时不会总是触发。 您可以尝试绑定到page:load

 $(document).on('page:load', function() { setInterval(rotateQuotes, 5000); }); 

您可能希望绑定到page:before-change以清理内容。

或者,您可以禁用Turbolinks,如果您不关心它。