Rails项目本地正常但Heroku上jQuery-ui失效求助

我碰到过一模一样的情况，本地跑好好的，一上Heroku就报TypeError: $(...).draggable is not a function，给你几个排查和解决的方向，亲测有效：

1. 移除重复的UJS引入，修正加载顺序 #

看你的application.js里同时引入了jquery_ujs和rails-ujs——这俩在Rails 5+里是冲突的！rails-ujs是jquery_ujs的替代方案，同时加载会干扰jQuery和jQuery UI的初始化。直接删掉//= require jquery_ujs，保留//= require rails-ujs就行，修改后的application.js应该是：

//= require jquery
//= require rails-ujs
//= require jquery-ui
//= require turbolinks
//= require_tree .

2. 让Heroku自己处理资产预编译，别用本地预编译的文件 #

很多时候本地预编译的assets在生产环境会有兼容性问题，正确的做法是：

• 先删掉本地生成的public/assets文件夹：rm -rf public/assets
• 检查你的.gitignore文件，确保加上了/public/assets（如果还没加的话），避免把本地预编译的文件推到Git
• 提交这些修改：git add . && git commit -m "Clean up local assets, rely on Heroku precompile"
• 重新推送到Heroku：git push heroku master

3. 明确引入jQuery UI的具体组件（可选但稳妥） #

有时候默认的//= require jquery-ui可能因为压缩或加载顺序问题漏了组件，你可以直接指定需要的draggable和droppable模块，替换掉原来的//= require jquery-ui：

//= require jquery-ui/draggable
//= require jquery-ui/droppable

这样能确保这两个组件被正确加载，不会遗漏。

4. 适配Turbolinks的事件触发时机 #

你的代码用了$(document).ready()，但Turbolinks会让页面不刷新就跳转，这个事件只会在第一次加载页面时触发，后续页面切换时代码不会执行，看起来就像是draggable没生效。把代码改成监听Turbolinks的加载事件：

<script>
$(document).on('turbolinks:load', function() {
  var callresultswal = function(){
    resultswal("Lückentext ausgefüllt!", "Du hast die Lücken korrekt ausgefüllt!", 500, "ethic", "utgf", "completed");
  };
  var points = 0;
  $( function() {
    $( ".draggable" ).draggable({
      revert: 'invalid',
      snap: ".dropfield",
      snapTolerance: 75,
      snapMode: "inner"
    });
    $( ".dropfield" ).droppable({
      drop: function( event, ui ) {
        if(ui.draggable.attr('id').toLowerCase() == $(this).attr('value')){
          points = points + 1;
          console.log(points);
          var id = ui.draggable.attr('id');
          $("#" + id).draggable( 'disable' );
          $("#" + id).css( "background-color", "#7FFF00");
          if (points == 6){
            callresultswal();
            $('#backforward').fadeIn("slow").removeClass("hidden-xl-down");
          }
        }
      }
    });
  } );
});
</script>

按这个顺序试下来，应该能解决问题。我当时是重复UJS和Turbolinks的问题一起存在，改完就好了。

内容的提问来源于stack exchange，提问作者Metaphysiker