Javascript在Rails资产管道中无法工作

Question

我曾经在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代码无法正常运行。

- Jason Carty

---

“not working”是什么意思？js文件需要通过erb解析吗？ - Flauwekeul

我不知道这个js文件是否需要通过erb解析。我只知道这些函数没有起作用。 - Jason Carty

首先检查您是否在控制器中包含了js，请参考此主题https://dev59.com/nVTTa4cB1Zd3GeqPr2FD - Navin

@Navi 我已经尝试在控制器中使用格式化js，也尝试了不使用。但是没有任何区别。 - Jason Carty

Answer 1

这是一个turbolinks的问题。 解决方法是用以下方式包装我的coffeescript：

ready = ->
// functions

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

- Jason Carty

Answer 2

您的 application.js 在加载 jQuery 之前加载了 myfile.js。假设此文件仍包含 jQuery 代码，则由于尚未定义 jQuery，它将无法正确运行。您的浏览器JS控制台是否显示类似于“未捕获的ReferenceError：$未定义”？请注意，Rails通常会生成类似于以下内容的application.js：

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

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

- Jacob Brown

---

jQuery被优先加载。我的application.js文件已经看起来像那样了。有人编辑了我的问题。 - Jason Carty

你的jQuery代码是否在$(document).ready(function() { ... });块内？ - Jacob Brown

嗨，我刚刚添加了那个，但是似乎没有太大的区别。 - Jason Carty

嗯...你的浏览器JS控制台没有显示出任何错误吗？否则，我没有其他想法。您可能需要包含一些/所有未工作的JS代码。 - Jacob Brown

我刚刚编辑了我的问题，并添加了js代码。唯一真正起作用的是slideUp函数。 - Jason Carty

Answer 3

我也遇到了与Jason Carty完全相同的问题。后来我发现这个问题是由于我在body标签底部的"yield"之后，放置了以下代码所致：   = javascript_include_tag "vendor/modernizr"   = javascript_include_tag "application", 'data-turbolinks-track' => true 我将它移回到样式表之前，在我的body标签上方的"csrt_meta_tags"之上，现在已经完美地解决了。

- drjorgepolanco