Rails javascript仅在重新加载后才有效

Question

问题正是标题所说的。 javaScript位于资产管道中，即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已经加载，但它只在我重新加载页面后才能工作。

Answer 1

对于turbolinks 5.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 2

这是一个涡轮问题。感谢@zwippie带领我朝着正确的方向前进！解决方案是将我的coffeescript包装成：

ready = ->
// functions

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

Answer 3

我想这是一个涡轮问题。

从项目中删除turbolinks或将脚本修改为：

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

正如提到的here。

Answer 4

您可以安装jquery.turbolinks gem来解决问题，而无需更改您的Javascript。

Answer 5

您可以将jquery.turbolink放置在正确的位置

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

在Gemfile中你可以安装jquery-turbolinks gem

gem 'jquery-turbolinks'

Answer 6

Rails 5使用jquery.turbolinks gem并使用

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

Answer 7

如果您使用Clock Time Picker等JQuery插件，首先使用jQuery document ready函数，这会导致您的脚本在尝试运行之前等待整个页面加载，然后您可以使用turbolinks:load事件。

JQuery(function($) {
  $(document).on('turbolinks:load', function() {
    $('.time').clockTimePicker();
  });
});

最好位于你的app/assets/javascripts/... js文件中

Answer 8

我正在尝试Rails 5.2并发现'turbolinks:load'在第一次加载页面时没有加载。这是我在CoffeeScript文件中需要做的。

document.addEventListener('turbolinks:load', ->
  # ... CoffeeScript code here
)

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")