Rails、link_toヘルパーをクリックした後にJavaScriptが読み込まれない

Question

link_toヘルパーをレールに使用すると、JavaScriptが読み込まれない場合があります。私は手動で 'localhost：3000/products/new'のURLを入力するか、ページをリロードするとjavascriptがロードされますが、以下のようなリンクをたどると、jQuery $(document).readyは新しいページにロードされません。

<%= link_to "New Product", new_product_path %> 

products.jsが

$(document).ready(function() { 
    alert("test"); 
}); 

すべてのヘルプははるかに高く評価されるだろうファイル：私はこのリンクをクリックしたときに

LINK_TO、Javascriptをロードしません。前もって感謝します！

Answer 1

あなたはRails 4を使用していますか？ （コンソールでrails -vを実行して確認してください）

この問題はおそらく新しく追加されたTurbolinksの宝石によるものです。これにより、アプリケーションは1ページのJavaScriptアプリケーションのように動作します。いくつかの利点（it's faster）がありますが、残念ながら$(document).ready()のようないくつかの既存のイベントは中断されます。これは、URLを直接読み込むときにJavaScriptが動作する理由を説明しますが、link_toでナビゲートするとJavaScriptが動作しない理由を説明します。

TurbolinksについてはRailsCastです。

いくつか解決策があります。あなたはドロップインフィックスとしてjquery.turbolinksを使用することができ、またはあなたの代わりにTurbolinks 'page:change'イベント使用するように$(document).ready()文を切り替えることができます。また

$(document).on('page:change', function() { 
    // your stuff here 
}); 

を、あなたはだけでなく、通常のページのロードとの互換性のために、このような何かを行うことができますTurbolinks：

var ready = function() { 
    // do stuff here. 
}; 

$(document).ready(ready); 
$(document).on('page:change', ready); 

あなたはRuby on Railsでを使用している場合は、> 5（コンソールでrails -vを実行することで確認することができます）の代わりに'turbolinks:load'を使用'page:change'

$(document).on('turbolinks:load', ready); 

Answer 2

私は同じ問題を抱えていますが、jquery.turbolinksは役に立ちません。私はGETメソッドをオーバーライドする必要があることに気付きました。

私のサンプルがあります：

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %> 

Answer 3

ます。また、データ-NO-turbolinkを指定していないのdivであなたのリンクをラップすることができます。

例：

<div id="some-div" data-no-turbolink> 
    <a href="/">Home (without Turbolinks)</a> 
</div> 

出典：https://github.com/rails/turbolinks

Answer 4

あなたが任意のインラインに<script>タグを持っていないことを確認してください。 （インラインスクリプトタグはターボリンクでは悪い）。

Answer 5

FWIW、Turbolinks docsから、$(document).readyの代わりにキャプチャするより適切なイベントはpage:changeです。

page:loadは新しいボディ要素がDOMにロードされている。

...それはキャッシュのリロードには発生しませんという警告があります部分的な置き換えやページがキャッシュから復元されたときに起動しないため、同じ本体で2回実行されません。

Turbolinksはビューを切り替えるだけなので、page:changeが適切です。

Answer 6

あなたはレール5の代わりに、'page:change'上にある場合は、このような'turbolinks:load'使用する必要があります。

$(document).on('turbolinks:load', function() { 
    // Should be called at each visit 
}) 

出典：https://stackoverflow.com/a/36110790