jQuery (document).on 在生产 Rails 5 中不起作用

Question

我目前正在使用 jquery on Rails 5 开发一个简单的星级评分系统。它在开发中运行良好，但在生产中运行不佳。

但是，当我在 /config/production.rb 中包含 config.assets.debug = true 时，它就可以工作了。我怀疑它为什么会以这种方式运行的原因之一是因为预编译 application.js 不知何故使 jQuery (document).on 无法正常工作。我已经被这个问题困扰了几天，并且无法在网上找到任何解决方案。

只是想知道，application.js 是否可能存在冲突？有需要我jQuery.noConflict()功能吗？

感谢您对此提供的帮助。以下是所有相关代码供参考。

应用程序.js

//= require jquery
//= require jquery_ujs
//= require bootstrap/js/bootstrap.bundle
//= require activestorage
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require turbolinks-compatibility

// Start for AGENCY
//= require js_agency/jqBootstrapValidation
//= require js_agency/contact_me
//= require js_agency/agency.min
// End for AGENCY

//START FOR ADMIN
//= require jquery_sb-admin/jquery
//= require jquery-easing_sb-admin/jquery.easing
//= require chart.js/Chart.min
//= require datatables/jquery.dataTables
//= require datatables/dataTables.bootstrap4
//= require js_sb-admin/sb-admin.min
//= require js_sb-admin/demo/datatables-demo
//= require js_sb-admin/demo/chart-area-demo
//END FOR ADMIN
//= require_self
//= require_tree .


$(document).on('turbolinks:load',function(){
    $('.rating-star').click(function(){
        var star = $(this);
        var data_form = $(this).attr('data-form');
        var data_field = $(this).attr('data-field');
        var stars = $(this).attr('data-stars');

        for (i=1;i<=5;i++){
            if(i <= stars){
                $('#' + 'rating' + '_' + data_form + '_' + i).removeClass('glyphicon glyphicon-star-empty');
                $('#' + 'rating' + '_' + data_form + '_' + i).addClass('glyphicon glyphicon-star');
            } else {
                $('#' + 'rating' + '_' + data_form + '_' + i).removeClass('glyphicon glyphicon-star');
                $('#' + 'rating' + '_' + data_form + '_' + i).addClass('glyphicon glyphicon-star-empty');
            }
        }
        $('#' + data_field).val(stars);
        $('#' + 'feedback').val(stars);
    });
});

/views/star/star_rating.html.erb

<div class="col-md-12">
  <% data_form = "Taska_try" %>
  <% data_field = "taska_rating" %> <!--the field for the stars -->
    <% (1..5).each do |i| %>
      <h1 id="rating_<%= data_form %>_<%= i %>" 
          data-form="<%= data_form %>" 
          data-stars="<%= i %>" 
          data-field="<%= data_field %>"
          class="rating-star glyphicon glyphicon-star-empty">
      </h1>
    <% end %>    
</div>

<div class="col-md-12">
  <% data_form = "Classroom_try" %>
  <% data_field = "classroom_rating" %> <!--the field for the stars -->
    <% (1..5).each do |i| %>
      <h1 id="rating_<%= data_form %>_<%= i %>" 
          data-form="<%= data_form %>" 
          data-stars="<%= i %>" 
          data-field="<%= data_field %>"
          class="rating-star glyphicon glyphicon-star-empty">
      </h1>
    <% end %>
</div>

Answer 1

我没有看到您在任何地方触发自定义事件turbolinks:load。所以，我想你只需要：

$(document).on('load'

代替：

$(document).on('turbolinks:load'

或者，如果您希望可以在某处触发自定义事件：

var turbolinks = jQuery.Event('turbolinks:load');
$(document).trigger(turbolinks);

或者干脆像这样触发：

$(document).trigger('turbolinks:load');