基本 jquery 滑块 TypeError: $ is not a function on Wordpress答案

【问题标题】：basic jquery slider TypeError: $ is not a function on Wordpress基本 jquery 滑块 TypeError: $ is not a function on Wordpress
【发布时间】：2013-02-21 14:09:08
【问题描述】：

我收到此错误：“TypeError: $ is not a function $('#slider').list({"

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://plumbsimple.com/wp-content/themes/bootstrapwp-87/js/basic-jquery-slider.min.js"></script>

         <script type="text/javascript">
              window.$ = jQuery;

              $(document).ready(function() {

                $('#slider').list({
                  'animation' : 'slide',
                  'width' : 700,
                  'height' : 300
                });

              });
        </script>

标题中的数据：

        <div id="slider"><ul class="list">
        <li><img src="<?php bloginfo( 'template_url' );?>/img/beach.jpg"></li>
        <li><img src="<?php bloginfo( 'template_url' );?>/img/hp-computers.jpg"></li>
        </ul>
        </div>

【问题讨论】：

你还没有加载jquery库
许多 CMS 也将 jQuery 置于noConflict 模式，如果是这种情况，您可以在脚本开头使用$ = jQuery; 重新分配它。我个人只是 wp_deregister_script('jquery'); 或评论其 wp_enqueue_script 行并手动将脚本输入源代码。
通过在 DOM 就绪事件中放置警报来检查 jQuery 是否正确加载
@zerkms jQuery 在第 240 行加载：plumbsimple.com

标签： javascript jquery html wordpress

【解决方案1】：

有两种变体：

您尚未加载 jQuery 库。
由于prototype.js或其他原因，$函数不可用，然后尝试使用jQuery函数而不是$。

【讨论】：

jquery 已在第 241 行加载：plumbsimple.com 而第 245 行应处理 jQuery 冲突：window.$ = jQuery;

【解决方案2】：

WP 默认将 jQuery 置于noConflict 模式：(source)

注意： WordPress 附带的 jQuery 库加载到 "no conflict" mode。这是为了防止与其他的兼容性问题 WordPress 可以加载的 javascript 库。

可以在控制台上轻松测试：

因此，如果您不使用任何其他可能与 jQuery 的 $ 冲突的库，您可以将 jQuery 重新别名为 $：

window.$ = jQuery;

将该行放在第一个脚本的最开始处，放在 jQuery 库之后，它会正常工作。

此外，您可以将所有 $ 引用替换为 jQuery 或使用不同的别名，以防与原型或其他库发生冲突。

编辑： 实际上还有一些东西会覆盖您的全局$。您可以将代码包装在 IIFE 中以创建一个可以安全地使用 $ 别名的作用域：

(function($) {
    $(document).ready(function() {

        $('#slider').list({
            'animation': 'slide',
            'width': 700,
            'height': 300
        });

    });
})(jQuery);

【讨论】：

感谢所有帮助，但还没有运气。此代码从第 240 行开始：<script type="text/javascript" src="http://plumbsimple.com/wp-content/themes/bootstrapwp-87/js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="http://plumbsimple.com/wp-content/themes/bootstrapwp-87/js/basic-jquery-slider.min.js"></script> <script type="text/javascript"> $ = jQuery; $(document).ready(function() { $('#banner').list({ 'animation' : 'slide', 'width' : 700, 'height' : 300 }); }); </script>
试试window.$ = jQuery;。 =]
是的，现在错误略有不同 - $ is not a function is in the $('#banner').list({，意味着它正在进入 DOM 就绪处理程序。我想知道什么可以覆盖它。
有趣的是，越来越近了。刚刚将#banner 更新为#slider 的正确div ID，但也出现了同样的错误。
@user1420650 再次更新。 =] 如果最后一个代码不起作用，我想手动将 jQuery 脚本包含为 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 将是最好的选择。

【解决方案3】：

很有可能用“jQuery”编写替换第一个“$”并将“$”传递给函数将使该错误消失。下面的例子。

          `jQuery(document).ready(function($) {

            $('#slider').list({
              'animation' : 'slide',
              'width' : 700,
              'height' : 300
            });

          });`

如果您查看 wordpress 手抄本，它们会提供正在发生的事情的解决方案。
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

【讨论】：