从另一个页面链接后，Rails 中的 JQuery 失败，可用于页面加载 [英] 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.

我认为这可能是 javascript 加载方式的问题.因为我在站点的另一个页面上有一个选项卡脚本，它可以正常加载，但是如果我链接离开并返回到该页面，它就不再有效...

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.

我在 Ubuntu 12 上运行 Rails 4、Ruby 2.0.0、Foundation，并使用 WebBrick 进行测试.Gemfile 发布如下:

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]

脚本:

    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);
            });

应用程序.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 相关.来自精美手册:

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

活动

使用 Turbolinks 页面将无需完全重新加载即可更改，因此您不能依赖 DOMContentLoaded 或 jQuery.ready() 来触发您的代码.相反，Turbolinks 在 document 上触发事件，以提供进入页面生命周期的钩子.

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 默认启用 turbolinks(你在 application.js 中有它)所以 $(function() { ... }) 不会更改页面时总是触发.您可以尝试绑定到 turbolinks:load 代替:

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);
});

您可能还想绑定到 turbolinks:before-visit 以进行清理.

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

或者，如果您不关心 Turbolinks，您可以禁用它.

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

这篇关于从另一个页面链接后，Rails 中的 JQuery 失败，可用于页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！