Rails javascript仅在重新加载后才起作用

Question

问题就是标题所说的。在我拥有的application.js中，javaScript在资产管道中，即assets/javaScript/myfile.js.cafee：

//= 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已经加载，但它只有在我重新加载页面后才能工作。

Answer 1

这是个turbolinks问题。感谢@zwippie将我引向正确的方向！解决方案是将我的coffeescript包装在下面的代码中：

ready = ->
// functions

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

Answer 2

对于turbolinks5.0，您必须使用turbolinks:load事件，该事件在第一次页面加载和每次turbolink访问时调用。更多信息：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();
})

Answer 3

我猜这是turbolinks的问题。

从您的项目中删除turbolinks，或者将脚本修改为类似以下内容：

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

正如前面提到的here。