javascript - 语义 UI 模块样式正确但没有响应

Question

我是 JS 和 Jquery 的新手，我担心我一定错过了一些基本的东西来引发这个错误:我试图包含在 html 中并使用 JS 启动的语义模块似乎没有响应，即使我只需从语义 UI 示例中复制片段。

我使用 bower 将语义 UI 和 Jquery 安装到一个单独的 bower_component 目录，然后将其作为附加内容根添加到 phpstorm 的元素目录中。我在 html header 中包含语义文件，路径都被识别:

    <link rel="stylesheet" href="semantic/dist/semantic.min.css">
    <script src="jquery/dist/jquery.min.js"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <script src="js/semantic_test.js"></script>

我从第一个示例中复制了 html this link到 html 和 js 到“js/semantic_test.js”。该页面在 Chrome 或 Safari 中显示为静态，所有样式均正确但没有响应。

我尝试了一些运行正常的 Bootstrap 组件。我还测试了 Jquery 和语义 UI 的 CDN 路径 - 仍然无法正常工作。我花了几个小时在谷歌上搜索，非常感谢您的帮助!

Answer 1

您是否将 jquery 代码包装在 document.ready 中

$(document).ready(function() {
 // your code here
 // ...
});

有时，当使用 JavaScript 初始化 html 组件的脚本在组件加载到 dom 之前运行时，可能会发生这种情况。