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带领我朝着正确的方向前进！解决方案是将我的咖啡包裹在这里：

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 2015-03-31函数，该函数会导致脚本等到整个页面加载完毕后再尝试运行，然后可以使用{{ 1}}事件。

document ready

位于您的turbolinks:load文件中很好

Answer 8

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

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

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")

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

8 个答案: