JQuery in Rails is failing after linking from another page, works on page load

问题

I have a quote rotator I use on my homepage. When I load the page from the browser directly (type the address in the browser and hit enter) it works fine.. However, if I click on a link to another page in my site and then link back to home it stops working. More specifically, it the quotes start to overlap almost as if two instances of the method are running.

I think it may be a problem with how the javascript is loading. Since I have a tab script on another page in the site and it will load fine, but if I link away and back to the page it no longer works...

Receiving no errors in the console.

I am running Rails 4, Ruby 2.0.0, Foundation, on Ubuntu 12, and using WebBrick for testing. Gemfile posted below:

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]

Script:

    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 .

回答1:

I'd guess that this is Turbolinks related. From the fine manual:

Events

With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.

AFAIK, Rails4 enables turbolinks by default (and you have it in your application.js) so $(function() { ... }) won't always fire when changing pages. You could try binding to turbolinks:load instead:

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

You might want to bind to turbolinks:before-visit to clean things up as well.

Alternatively, you could disable Turbolinks if you don't care about it.

来源：https://stackoverflow.com/questions/18623248/jquery-in-rails-is-failing-after-linking-from-another-page-works-on-page-load