58

问题正是标题所说的。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 .

这是咖啡脚本

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

4

8 回答 8

76

对于 turbolinks 5.0，您必须使用turbolinks:load事件，该事件在页面加载的第一次和每次 turbolink 访问时调用。更多信息：https ://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

咖啡脚本代码：

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

JavaScript 代码：

document.addEventListener("turbolinks:load", function() {
  my_func();
})
于 2016-08-01T21:14:00.893 回答
29

这是一个涡轮链接问题。感谢@zwippie 引导我朝着正确的方向前进！解决方案是将我的咖啡脚本包装在这个：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
于 2013-06-26T19:38:21.300 回答
25

我想这是一个涡轮链接问题。

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

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

正如这里提到的。

于 2013-06-26T12:14:51.247 回答
19

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

于 2014-03-17T02:07:19.543 回答
9

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

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

在 Gemfile 中，您可以安装 jquery-turbolinks gem

gem 'jquery-turbolinks'
于 2016-01-29T01:39:25.470 回答
7

Rails 5 使用 jquery.turbolinks gem 并使用

$( document ).on('turbolinks:load', function() {
  // your code
}
于 2016-11-19T22:15:41.503 回答
2

如果您使用诸如Clock Time Picker之类的 JQuery 插件，请首先使用 jQuerydocument ready函数，这会使您的脚本等到整个页面加载完毕后再尝试运行，然后您可以使用turbolinks:loadevent. 

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

位于您的app/assets/javascripts/... js文件中很好

于 2018-09-06T15:33:56.780 回答
0

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

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

if !Turbolinks?
  location.reload

Turbolinks.dispatch("turbolinks:load")
于 2018-03-26T11:53:15.757 回答