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在重新加載后工作。 但無論何時第一次進入頁面（直接從鏈接）它都無法正常工作。

Answer 1

這是一個渦輪問題。 解決方案是將我的coffeescript包裝成：

ready = ->
// functions

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

Answer 2

你的application.js正在jQuery之前加載myfile.js 。 假設此文件仍包含jQuery代碼，則由於尚未定義jQuery，因此無法正常運行。 您的瀏覽器的JS控制台是否會出現類似：“未捕獲的ReferenceError：$未定義”？

請注意，Rails通常生成一個如下所示的application.js ：

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

此外，如果myfile.js包含ERB代碼，則需要將其重命名為myfile.js.erb如@Flauwekeul所示。

Answer 3

我有同樣的問題傑森卡蒂。 后來我發現這個問題是因為我有：
= javascript_include_tag“vendor / modernizr”
= javascript_include_tag“application”，“data-turbolinks-track”=> true
低於“產量”，位於我身體標簽的底部。 我把它移回到頂部，在樣式表之后和“csrt_meta_tags”之前，在我的身體標簽之上，現在可以完美地工作。