Rails javascript só funciona depois de recarregar

O problema é exatamente o que o título diz. O javaScript está no pipeline de ativos, ou seja, assets / javascripts / myfile.js.coffee No application.js eu tenho:

//= require jquery //= require jquery_ujs //= require turbolinks //= require jquery.ui.all //= requier twitter/bootstrap //= require jasny-bootstrap //= require_tree . 

Este é o coffeescript

 $(document).ready -> $("#close").click -> $(this).parent().parent().slideUp("slow") $( "#datepicker" ).datepicker dateFormat : "yy-mm-dd" player_count = $("#player option").length $('#btn-add').click -> $('#users option:selected').each -> if player_count >= 8 $('#select-reserve').append(""+$(this).text()+"") $(this).remove() else $('#player').append(""+$(this).text()+"") $(this).remove() player_count++ $('#btn-remove').click -> $('#player option:selected').each -> $('#users').append(""+$(this).text()+"") $(this).remove() player_count-- $('#btn-remove-reserve').click -> $('#select-reserve option:selected').each -> $('#users').append(""+$(this).text()+"") $(this).remove() $("#submit").click -> $("select option").prop("selected", "selected") 

Eu posso ver no código-fonte no navegador que o javaScript foi carregado, mas só funciona depois que eu recarregar a página.

Para turbolinks 5.0 você deve usar o evento turbolinks: load , que é chamado pela primeira vez no carregamento da página e toda vez em uma visita turbolink. Mais informações: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Código CoffeeScript:

 $(document).on 'turbolinks:load', -> my_func() 

Código JavaScript:

 document.addEventListener("turbolinks:load", function() { my_func(); }) 

Este foi um problema de turbolinks. Obrigado ao @zwippie por me liderar na direção certa! A solução foi envolver meu café aqui:

 ready = -> // functions $(document).ready(ready) $(document).on('page:load', ready) 

Eu acho que isso é um problema turbolinks.

Remova os turbolinks do seu projeto ou modifique seu script para algo como:

 $(function() { initPage(); }); $(window).bind('page:change', function() { initPage(); }); function initPage() { // Page ready code... } 

Como mencionado aqui .

Você pode instalar a gema jquery.turbolinks para resolver o problema sem alterar seu Javascript.

Você pode ter o seu lugar jquery.turbolink na posição correta como este

  //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require bootstrap-sprockets //= require turbolinks 

E no Gemfile você pode instalar a gem jquery-turbolinks

 gem 'jquery-turbolinks' 

Rails 5 Use a gema jquery.turbolinks e usando

 $( document ).on('turbolinks:load', function() { // your code } 

Estou experimentando o Rails 5.2 e descobri que 'turbolinks:load' não estava sendo carregado na primeira vez que uma página é carregada. Isto é o que eu precisava fazer no meu arquivo CoffeeScript.

 document.addEventListener('turbolinks:load', -> # ... CoffeeScript code here ) if !Turbolinks? location.reload Turbolinks.dispatch("turbolinks:load")