Rails 7移动端jQuery滑块无法拖拽及touchpunch加载报错问题

核心原因 #

touchpunch-rails 1.0.3版本依赖的jQuery UI模块路径，与你使用的jquery-ui-rails 6.0.1文件结构不匹配，再加上Rails7对asset pipeline的调整，导致文件引用失败。

解决步骤 #

1. 修正JS引用配置 #

你的JS文件里// require jquery-ui/widgets/slider少了等号，同时需要显式引入mouse模块（touchpunch依赖它，而jquery-ui-rails 6.x中mouse的路径是jquery-ui/widgets/mouse），修改后的配置：

//= require jquery
//= require jquery-ui/widgets/mouse
//= require jquery-ui/widgets/slider
//= require jquery.ui.touch-punch

2. 清理Asset缓存 #

Rails7的asset缓存可能残留旧路径，运行以下命令清除：

rails assets:clean

开发环境下重启服务器，确保新的引用生效。

3. 兼容Turbolinks #

因为你用了turbolinks，滑块初始化代码需要绑定到turbolinks:load事件，避免页面切换后功能失效：

$(document).on('turbolinks:load', function() {
  // 替换成你的滑块选择器
  $('.your-slider-class').slider();
});

4. 备选方案：跳过touchpunch-rails gem #

如果上述方法仍报错，直接下载jQuery UI Touch Punch的源码文件jquery.ui.touch-punch.js，放到app/assets/javascripts目录下，然后在JS配置里直接引入本地文件，绕开gem的路径问题：

//= require jquery
//= require jquery-ui/widgets/slider
//= require jquery.ui.touch-punch

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