TypeError: $ is not a function

Question

我正在尝试使用 PinchZoomer，这是 Wordpress 网站上的一个 Jquery 插件，但我在 firebug 中两次收到此错误：TypeError: $ is not a function

我知道我应该在 Wordpress 中使用 "jQuery" 而不是 $ 符号，但在这种情况下它没有什么不同。这是我的代码：

<script type="text/javascript">
jQuery( document ).ready(function($) {
        $(".pinchzoom").pinchzoomer();
});
</script>

这是我在 Wordpress 中排队 jQuery 和 PinchZoomer 插件的代码：

function add_jQuery_scripts() {

    wp_enqueue_script('jquery');
    wp_enqueue_script('hammer', get_template_directory_uri() . '/pinchzoomer/jquery.hammer.min.js', array() );
    wp_enqueue_script('mousewheel', get_template_directory_uri() . '/pinchzoomer/jquery.mousewheel.min.js', array() );
    wp_enqueue_script('pinchzoomer', get_template_directory_uri() . '/pinchzoomer/jquery.pinchzoomer.min.js', array() );
    wp_enqueue_script('modernizr', get_template_directory_uri() . '/pinchzoomer/modernizr.min.js', array() );
    wp_enqueue_script('tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array() );
}

add_action('wp_enqueue_scripts', 'add_jQuery_scripts');

This is the page pinchzoomer 应该工作的地方。

我错过了什么？

Answer 1

初始问题

根据 wp_enqueue_script 的 Wordpress docs，第三个参数是该文件的依赖项。

该参数可选，接受数组类型。因此 jQuery 可以用于该文件，您需要做的就是将其添加为依赖项。

例如：

wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array('jquery'));

您可以阅读更多关于此 here 的文档，其中文档解释了 'Linking a Theme Script Which Depends on jQuery'。

可能是冗余代码

我认为您不需要在代码中包含这部分，因为我认为 Wordpress 附带 jQuery 并且您会将其定义为依赖项，而 'enqueue-ing' 相关脚本：

wp_enqueue_script('jquery');

无冲突模式

最后，关于将 jQuery 置于无冲突状态并在函数中显示美元符号的评论。

通过在函数旁边的括号中添加美元符号，这基本上只是将 $ 符号引入本地范围，作为访问 jQuery 的一种方式，而无需重新键入 jQuery 每次在 'no conflict' 模式下。

即这只是一种更短的访问方式。您可以阅读有关 Wordpress 中无冲突包装器的信息以及有关在文档中使用 $ 简称 here 的信息。

因此按以下方式使用该库应该没问题。

jQuery(document).ready(function($) {
  $(".pinchzoom").pinchzoomer();
});

PinchZoomer 问题

通过查看插件源代码以及我们在评论中讨论的内容，第 1440 行的 PinchZoomer 插件本身可能存在问题，因为它们本身并未使 $ 可用于其本地范围.

可以通过在线1440设置断点，刷新页面，将$的值设置为jQuery来进行测试。如果您可以自己访问源代码，则可以进行修复，尽管实际上他们应该自己进行修复。

第 1433 - 1442 行的损坏代码应修复为如下代码所示：

(function($)
{
    function onReady()
    {
        PinchZoomer.init();
    }

    $(onReady);

}(jQuery));

Answer 2

您可以在准备功能之前添加此代码。

$=jQuery;

另外请在第二行使用 $ 或 jQuery 您使用 $ 请使用 jQuery 并检查。

Answer 3

当我转到您引用的页面时，如果我在控制台中计算 $，我得到未定义，但 jQuery 已定义。我认为您的问题可能是回调变量，如果 jQuery 被定义，那么您不必担心 $ 被定义，除非存在库冲突。

这应该有效：

jQuery( document ).ready(function() {
    $(".pinchzoom").pinchzoomer();
});

这是您正在做的事情的简写版本：

jQuery(function() {
    $(".pinchzoom").pinchzoomer();
});
// Or
$(function() {
    $(".pinchzoom").pinchzoomer();
});

作为匿名函数

另一种选择是将您的 jquery 包装在一个匿名函数中：

(function($) {
    // All of your jquery calls inside of here
    $(function() {
        $(".pinchzoom").pinchzoomer();
    });
})(jQuery);

TypeError: $ is not a function