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...
}

如前所述这里.

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
}