Question

我在rails项目上有以下JavaScript代码

// app/assets/javascript/simple_effects.js

$(function() {
  // Hide completed tasks when checkbox is clicked. projects/show
  $('#hide-completed').click(function() {
    $('.task-completed').toggle();
  });
  // Change label to checkbox that hides completed tasks. project/show
  $('#hide-completed').change(function(){
    var c = this.checked ? ' Show completed tasks' : ' Hide completed tasks';
    $('#checkbox-label').text(c);
  });

});

当我进入页面时，代码不会触发，但只有在刷新后才会触发。我正在使用turbolinks。

我知道这个问题： Rails loading my javascript only after a page reload 但我真的不知道是否可以在我的情况下使用该解决方案。谢谢！

编辑：这是我的application.js文件

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

Answer 1

如果你有很多现有的JavaScript绑定jQuery.ready（）上的元素，你可以将jquery.turbolinks库拉到你的项目中，当Turbolinks触发页面时会触发ready（）：load event。它可能会恢复某些库的功能。

将gem添加到项目中，

gem 'jquery-turbolinks'

然后在jquery.js之后但在turbolinks.js之前将以下行添加到JavaScript清单文件中：

//= require jquery.turbolinks

您的application.js

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

Answer 2

如果您使用的是turbolinks 5+，则$(document).on "turbolinks:load", ->不再有效（请参阅https://github.com/kossnocorp/jquery.turbolinks）。

相反，您可以将代码包装到函数$ -> $("#add-artwork-btn").on 'click', -> div = $("#add-artwork-div") div.toggle(200)中。

E.g。

$(document).on "turbolinks:load", ->
  $ ->
    $("#add-artwork-btn").on 'click', ->
      div = $("#add-artwork-div")
      div.toggle(200)

变为

{{1}}

.js文件仅在rails中刷新页面后加载

2 个答案: