2016-08-07 11 views
0

jQueryのは、私は私はいくつかのjQueryを実装しようとしているレールのアプリを持って動作し、動作しません。ときに最初にロード

私は2つのスクリプト、最初のロードで動作するもの、および必要とするものを持っていますリロード。私はapplication.jsでターボリンクを修正したところで今働いているものに問題がありました。他のスクリプトにも同じ問題が発生しています。作品

1:

jQuery(document).ready(function($){ 
//set animation timing 
var animationDelay = 5000, 
    //loading bar effect 
    barAnimationDelay = 3800, 
    barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file 
    //letters effect 
    lettersDelay = 50, 
    //type effect 
    typeLettersDelay = 150, 
    selectionDuration = 500, 
    typeAnimationDelay = selectionDuration + 800, 
    //clip effect 
    revealDuration = 600, 
    revealAnimationDelay = 1500; 

initHeadline(); 

動作しない1:等々ように

jQuery(document).ready(function($){ 
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well 
var MQL = 1170; 

//primary navigation slide-in effect 
if($(window).width() > MQL) { 
    var headerHeight = $('.box-header').height(); 
    $(window).on('scroll', 
    { 
     previousTop: 0 
    }, 
    ... 
    ... 

どうしてですか? CSSまたはそれが呼び出されているページに問題はありますか?

+0

方法'application.js'でターボリンクを変更しましたか? – MarsAtomic

+0

それはこのようですので、私はそれを再配置: // = jqueryのを必要と // = jquery.turbolinksを必要と // = jquery_ujsを必要と // =あなたは完全にその 'require'をコメントアウトすることでturbolinksを無効にするとどうなりますかturbolinks – user1636937

+0

が必要です? – MarsAtomic

答えて

0

Turbolinksは、あなたのページの<head>要素にリストされているアセットを維持することによってオーバーヘッドを節約しようとします(とりわけ)。フル・ロード(リフレッシュ・ボタンを使用)を使用してページをロードすると、実際のレディ・イベントが発生し、スクリプトが機能します。一方、ページを他の方法で(リンク経由で)訪れた場合、Turbolinksは<head>要素を再利用しようとします。そのため、準備完了イベントは発生しません。

これまでのソリューションでは、application.jsまたはlink(data:{no_turbolink:true})のrequire行を削除するだけで、Turbolinksを完全に無効にすることができました。 Rails 4.2.xと5.xでは、通常の準備完了イベントが以前に動作していた場所で動作するはずのTurbolinks関連のイベントを聴くことができます。 documentationから

:Turbolinksは、通常のページのロード処理をオーバーライドするため

しかし、これが依存している イベントは発生しません。あなたは、コードを持っている場合 は、あなたの代わりにこれを行うには、あなたのコードを変更する必要があります。この

$(document).ready -> 
    alert "page has loaded!" 

のように見えること:

$(document).on "turbolinks:load", -> 
    alert "page has loaded!" 

(わかりやすくするために、わずかに再配置引用)

関連する問題