Rails 7应用中Semantic UI Dropdown功能异常求助

问题诊断 #

1. Turbo 事件不匹配：Rails 7 默认使用 Turbo 替代了旧版 Turbolinks，你代码中监听的 turbolinks:load 事件在 Turbo 环境下不会触发，导致下拉菜单初始化代码从未执行。
2. 全局变量作用域问题：通过 CDN 直接引入 jQuery 和 Semantic UI 时，在 Importmap 启用的环境中，$ 可能没有被正确挂载为全局变量，导致初始化代码找不到 jQuery 对象。

解决方案 #

方案一：适配 Turbo 事件并确保全局变量可用 #

1. 修改 custom.js 中的事件监听，替换为 Turbo 对应的事件：

// app/javascript/custom.js
document.addEventListener('turbo:load', function() {
  // 确保jQuery全局可用
  if (typeof $ !== 'undefined') {
    $(".ui.dropdown").dropdown();
  }
});

如果页面存在局部更新场景，也可以使用 turbo:render 事件：

document.addEventListener('turbo:render', function() {
  if (typeof $ !== 'undefined') {
    $(".ui.dropdown").dropdown();
  }
});

2. 调整 application.html.erb 中脚本的引入逻辑，添加 defer 标签优化加载同时保证执行顺序：

<!-- 在body末尾 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js" defer></script>
<%= javascript_include_tag 'custom', defer: true %>

方案二：通过 Importmap 管理依赖（Rails 7 最佳实践） #

1. 在终端执行命令，将 jQuery 和 Semantic UI 添加到 Importmap：

bin/importmap pin jquery@3.6.0 semantic-ui@2.4.2

2. 修改 application.js，导入并全局挂载 jQuery：

// app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"
import $ from "jquery"
window.$ = $; // 挂载为全局变量供Semantic UI使用
import "semantic-ui"

3. 更新 custom.js，兼顾初始加载和局部更新场景：

// app/javascript/custom.js
// 页面首次加载初始化
$(document).ready(function() {
  $(".ui.dropdown").dropdown();
});
// 页面局部更新后重新初始化
document.addEventListener('turbo:render', function() {
  $(".ui.dropdown").dropdown();
});

4. 移除 application.html.erb 中手动引入的 jQuery 和 Semantic UI 的 script 标签，保留样式链接即可。

验证步骤 #

1. 重启 Rails 服务器
2. 打开浏览器开发者工具控制台，检查是否存在 jQuery 未定义的报错
3. 点击下拉菜单，确认是否正常展开/收起

内容的提问来源于stack exchange，提问作者Afaq Shahid Khan