从另一个页面链接后，Rails中的JQuery失败，可以在页面加载时使用 [英] JQuery in Rails is failing after linking from another page, works on page load

问题描述

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

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

application.js

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有关.摘自精细手册:

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默认情况下启用涡轮链接(并且已将其放置在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.

或者，如果您不关心涡轮增压链接，则可以将其禁用.

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

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