Wordpress Roots/Sage 模板 Uncaught TypeError: $ is not a function答案

【问题标题】：Wordpress Roots/Sage template Uncaught TypeError: $ is not a functionWordpress Roots/Sage 模板 Uncaught TypeError: $ is not a function
【发布时间】：2020-07-10 12:42:29
【问题描述】：

所以我最近开始探索 wordpress，听说这个主题 Roots/sage 类似于 php 框架的工作方式，如我更熟悉的 larvel。

主题安装成功，
设置好，一切正常，
浏览器同步工作，
创建了几个自定义页面 - 一切正常，现在是时候向 layouts 文件夹中的 app.blade.php 文件添加一些 javascript 了。如果我理解正确 jquery 和 javascript 已经包含在 sage 设置中，因为 bootstrap 可以完美运行。

所以在正文标记结束之前的 app.blade.php 文件中，我添加了这段代码来检查 javascript 是否真的有效：

    <script type='text/javascript'>
      $(document).ready(function() {
        console.log( "ready!" );
      });
    </script>

  </body>
</html>

结果我得到了这个错误：Uncaught TypeError: $ is not a function 好的，所以我决定删除 $(document).ready().... 只留下字面意思

        <script type='text/javascript'>
            console.log( "ready!" );
        </script>
    
      </body>
    </html>

而且效果很好！

如果 jquery/javascript 已经包含，包含 sages assets/scripts/main.js 文件应该没关系，我应该能够在每个页面的底部抛出一个随机的 js 函数，不是吗？

所以我的问题是，有人可以解释为什么它会抛出错误以及如何修复它，我希望我的页面在输出任何脚本之前完全加载“准备就绪”。我希望这是有道理的..

【问题讨论】：

可以How do I add a simple jQuery script to WordPress?帮忙吗？
@gaetanoM 似乎 jQuery(document).ready(function($) { console.log( "ready!" ); });与 console.log("ready!"); 完全一样。 .我只是对为什么 $(document).ready 不起作用感到困惑
Wordpress 在内部使用 $ 符号。所以，你需要使用扩展格式：jQuery

标签： javascript jquery wordpress roots-sage

【解决方案1】：

您可以将它包装在这样的函数中以使其工作：

( function( $ ) {
    console.log( "ready!" );
}( jQuery ) );

另一种方法是将$ 的宽度替换为jQuery：

jQuery(document).ready(function() {
        console.log( "ready!" );
});

这两种解决方案都应该在 wordpress 中正常工作。

【讨论】：