Rails javascript работает только после перезагрузки

Проблема заключается именно в заголовке. JavaScript находится в конвейере активов i.e assets/javascripts/myfile.js.coffee В application.js у меня есть:

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

Это 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("<option      value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()    
      else
        $('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
        $(this).remove()
        player_count++


  $('#btn-remove').click ->
    $('#player option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()
      player_count--


  $('#btn-remove-reserve').click ->
    $('#select-reserve option:selected').each ->
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
      $(this).remove()


  $("#submit").click ->
   $("select option").prop("selected", "selected")

Я могу видеть в исходном коде браузера, что javaScript был загружен, но он работает только после перезагрузки страницы.

Ответ 1

Это была проблема turbolinks. Спасибо @zwippie за то, что он вел меня в правильном направлении! Решение заключалось в том, чтобы обернуть мой coffeescript следующим образом:

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)

Ответ 2

Для turbolinks 5.0 вы должны использовать событие turbolinks: load, которое вызывается в первый раз при загрузке страницы и каждый раз при посещении турболинка. Дополнительная информация: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Код CoffeeScript:

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

Код JavaScript:

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

Ответ 3

Я думаю, это проблема с turbolinks.

Либо удалите турбонауки из вашего проекта, либо измените свой script на что-то вроде:

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

Как упоминалось здесь.

Ответ 4

Вы можете установить камень jquery.turbolinks, чтобы решить проблему без изменения вашего Javascript.

Ответ 5

У вас может быть место jquery.turbolink в нужном месте, например

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

И в Gemfile вы можете установить jquery-turbolinks gem

gem 'jquery-turbolinks'

Ответ 6

Рельсы 5 Используйте jquery.turbolinks gem и используя

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