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

IT技术 javascript ruby-on-rails ruby-on-rails-3 asset-pipeline
2021-02-05 09:37:56

问题正是标题所说的。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，但它只有在我重新加载页面后才有效。

6个回答

对于 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();
})
花了很多年的时间来解决这个问题。你的解决方案对我有用。
2021-03-15 09:37:56
完全相同的问题，我特别想弄清楚如何一次性修改 turbolink 负载。谢谢！
2021-03-16 09:37:56
@wolfQueen asp.net 和 C# 通常用于服务器端。您可能应该查看您的客户端文件（这可以在特定的 .js 文件上或在您的 html 中，具体取决于您要执行的操作）
2021-03-17 09:37:56
我有确切的问题，但我使用 C# 和 asp.net。您能否为此建议正确的脚本？谢谢
2021-03-28 09:37:56
这是唯一一款适用于我的新 Rails 5 应用程序
2021-04-13 09:37:56

这是一个涡轮链接问题。感谢@zwippie 带领我走向正确的方向！解决方案是将我的咖啡脚本包装成这样：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)
那就是咖啡脚本，它是函数的语法。
2021-03-26 09:37:56
我不明白，你有没有把这个确切的代码放在你问题的代码之上？您是否选择了其中一项活动？您是否将一个嵌套在另一个中？
2021-03-28 09:37:56
@JasonCarty 我做到了，我在 JQuery-> $(document).ready ->$(document).on 'turbolinks:load', -> 中通过咖啡脚本调用。但我也发现在 IE 中它可以工作，但如果值为空，firefox 会自动完成......
2021-03-29 09:37:56
嗨@GiovanniDiToro，您需要做的是在page:load事件发生后运行代码。因此，在我的示例中，我将要运行的代码封装在一个名为 ready 的函数中，并将其添加为要在page:load事件之后运行的回调。
2021-04-09 09:37:56

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

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

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

正如这里提到的。

这个解决方案对我和 Rails 5 都有效，但'page:change'我没有使用'turbolinks:load'.
2021-03-20 09:37:56

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

不再适用于 Rails 5。请参阅讨论github.com/kossnocorp/jquery.turbolinks/issues/56 - gem 已被弃用。
2021-03-31 09:37:56

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

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

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

gem 'jquery-turbolinks'
如果您有查询，然后是涡轮链接，然后是 jquery.turbolinks，您将生成必须创建重新加载的条件。在我看来，这是最快、最便宜和正确的答案。添加 gem +按正确顺序插入app/assets/javascript/application.js 中的 require 语句
2021-03-16 09:37:56
其它你可能感兴趣的问题
上一篇系统未定义 下一篇获取当前的 YouTube 视频时间