Javascript 在 Rails 资产管道中不起作用答案

【问题标题】：Javascript not working in rails asset pipelineJavascript 在 Rails 资产管道中不起作用
【发布时间】：2023-04-08 07:50:01
【问题描述】：

我已经为 js.erb 文件中的部分编写了一些 jQuery。这个 jQuery 变成了通用函数，我决定将其放入资产管道，即 assets/javascripts/myfile.js，现在 JavaScript 不再工作。我可以从源代码中看到 JavaScript 正在加载到浏览器中，但它什么也没做，但它之前作为 js.erb 文件工作。

可能是什么问题？

在 application.js 我有

//= require jquery
//= require_tree .

这是我的 js：

$(document).ready(function() { 
  $("#close").click(function(){
    $(this).parent().parent().slideUp("slow");
  });


  $(function() {
    $( "#datepicker" ).datepicker({
      dateFormat : "yy-mm-dd"
    });
  });

  var player_count = $("#player option").length;


  $('#btn-add').click(function(){
    $('#users option:selected').each( function() {
      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(function(){
    $('#player option:selected').each( function() {
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
      $(this).remove();
      player_count--;
    });
  });

  $('#btn-remove-reserve').click(function(){
    $('#select-reserve option:selected').each( function() {
      $('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
      $(this).remove();
    });
  });

  $("#submit").click(function(){

    $("select option").prop("selected", "selected");

  });
});

我注意到一个新的发展，js 在点击重新加载后可以工作。但无论何时第一次进入页面（直接来自链接）它都不起作用。

【问题讨论】：

“不工作”是什么意思？ js文件需要erb解析吗？
不知道js文件是否需要erb解析。我所知道的是这些函数什么也没做。
首先检查你是否在控制器中包含了js检查这个主题stackoverflow.com/questions/5017114/…
@Navi 我尝试过在控制器中使用和不使用格式 js。没有区别。

标签： javascript ruby-on-rails asset-pipeline

【解决方案1】：

这是一个 turbolinks 问题。解决方案是将我的咖啡脚本包装在：

ready = ->
// functions

$(document).ready(ready)
$(document).on('page:load', ready)

【讨论】：

【解决方案2】：

您的 application.js 在 jQuery 之前加载 myfile.js。假设这个文件仍然包含 jQuery 代码，它不会正确运行，因为 jQuery 尚未定义。您的浏览器的 JS 控制台是否显示类似：“Uncaught ReferenceError: $ is not defined”？

请注意，Rails 通常会生成一个 application.js，如下所示：

//= require jquery
//= require jquery_ujs
//= require_tree .

另外，如果myfile.js 包含ERB 代码，那么您需要按照@Flauwekeul 的建议将其重命名为myfile.js.erb。

【讨论】：

jquery 先加载。我的 application.js 文件已经看起来像这样。有人编辑了我的问题。
您的 jQuery 代码是否在 $(document).ready(function() { ... }); 块内？
嗨，刚刚添加了，但没有太大区别
嗯...你浏览器的 JS 控制台没有显示任何错误？否则，我没有其他想法。您可能希望包含部分/全部不起作用的 JS 代码。
我刚刚编辑了我的问题并添加了 js。真正起作用的一件事是 slideUp 功能。

【解决方案3】：

我遇到了完全相同的问题 Jason Carty。后来我发现问题是因为我有：
= javascript_include_tag "供应商/modernizr"
= javascript_include_tag "应用程序", '数据-turbolinks-track' => true
在“产量”下方，在我的身体标签底部。我将它移回顶部，在样式表之后和“csrt_meta_tags”之前，在我的主体标签上方，现在可以完美运行。

【讨论】：