78

Rails 4 アプリケーションを作成し、画像ポップアップ効果用の fancybox ライブラリを追加しました。正常に動作しますが、ページが更新されている場合のみです。ユーザーがページを更新しない場合、jquery はまったく機能しません。小さなjqueryメソッドでもテストしてみましたが、すべてページの更新後にのみ機能します。Twitterのブートストラップも使用しています。

私の assets/application.js ファイル:

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .


$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});
4

5 に答える 5

180

わかりました、私はあなたの問題を十分に理解していると思います。ターボリンクを使用すると、ドキュメント準備完了イベントにバインドするほとんどのプラグインとライブラリが機能しなくなります。これは、ターボリンクがブラウザーによるページのリロードを防止するためです。これらの問題を修正するコツはありますが、最も簡単な修正方法はjquery.turbolinksを使用することです。

それを使用するには、これをあなたのに追加するだけGemfileです:

gem 'jquery-turbolinks'

そしてこれをあなたのassets/javascripts/application.jsファイルに：

//= require jquery.turbolinks

そして、あなたは行く準備ができているはずです。

参考までに: ターボリンクを使用する必要はありませんが、これは便利で、ページ全体の更新を回避することでリクエストを高速化します。Turbolinks は、クリックしたリンクのコンテンツを AJAX 経由で取得し、同じページにレンダリングするため、アセット (JS および CSS) をリロードするオーバーヘッドがなくなります。あなたのページがそれで機能するようにしてください。前の段落のライブラリを使用しても、実際の問題はありませんでした。ページにある CSS と JS が多いほど、ターボリンクを使用することで得られる改善は大きくなります。

于 2013-07-29T13:02:54.203 に答える
17

Ian には良い答えがありました。これは、ある種のアドオンです (執筆時点では、実際に誰にもコメントすることはできません)。

https://github.com/rails/turbolinks/#jqueryturbolinksから:

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks

以前はrequire jquery.turbolinks、リスト内の適切な場所に追加していなかったので、少しうるさいものでした. それから私はこれを新しい方法で追加しました。

于 2014-03-13T08:21:15.660 に答える
8

CodeWalrus と Ian の両方の回答に従うまではうまくいきませんでしたが、私にとってはそれ以上のことがありました。jquery.turbolinks Readmeで説明されているように、順序は非常に具体的でなければなりません。

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

また、ここで説明したよう<head>に、速度を最適化するためにアプリケーションの JavaScript リンクをフッターに配置した場合は、タグ内のコンテンツの前に読み込まれるようにタグ内に移動する必要があります<body>。

于 2015-05-21T17:36:22.627 に答える