251

我在一个使用 jQuery 包装器的 WordPress 插件中有一个简单的 jQuery 脚本，如下所示：

$(document).ready(function(){

    // jQuery code is in here

});

我从 WordPress 仪表板中调用此脚本，并在 jQuery 框架加载后加载它。

当我在 Firebug 中检查页面时，我不断收到错误消息：

类型错误：$ 不是函数

$(文档).ready(函数(){

我是否应该将脚本包装在此函数中：

(function($){

    // jQuery code is in here

})(jQuery);

我已经多次遇到此错误，不知道如何处理它。

任何帮助将不胜感激。

4

17 回答 17

362

默认情况下，当您在 Wordpress 中加入 jQuery 时，您必须使用jQuery，并且$不使用（这是为了与其他库兼容）。

您将其包装的解决方案function可以正常工作，或者您可以通过其他方式加载 jQuery（但这在 Wordpress 中可能不是一个好主意）。

如果必须使用document.ready，实际上可以传入$函数调用：

jQuery(function ($) { ...
于 2012-09-09T23:10:39.027 回答
173

这应该解决它：

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  var body = $( 'body' );
});

简而言之，WordPress 会先运行它们自己的脚本，然后它们会释放$var，这样它就不会与其他库发生冲突。这是完全有道理的，因为 WordPress 用于各种网站、应用程序，当然还有博客。

从他们的文档中：

WordPress 附带的 jQuery 库设置为 noConflict() 模式（请参阅 wp-includes/js/jquery/jquery.js）。这是为了防止与 WordPress 可以链接的其他 JavaScript 库的兼容性问题。

在 noConflict() 模式下，jQuery 的全局 $ 快捷方式不可用...

于 2012-09-09T23:09:49.237 回答
33

这个解决方案对我有用

;(function($){
    // your code
})(jQuery);

将您的代码移动到闭包内并使用$而不是jQuery

我在https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma中找到了上述解决方案

...在搜索太多之后

于 2014-11-08T17:21:37.843 回答
29 
var $=jQuery.noConflict();

$(document).ready(function(){
    // jQuery code is in here
});

感谢 Ashwani Panwar 和 Cyssoo 的回答：https ://stackoverflow.com/a/29341144/3010027

在 WordPress 中使用 jQuery 而不是 $ 的原因：https ://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

于 2016-05-30T08:14:37.713 回答
21

你可以避免这样的冲突

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});
于 2015-03-30T08:02:33.917 回答
14

试试这个：

<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
    jQuery.noConflict();
    (function ($) {
        function readyFn() {
            // Set your code here!!
        }

        $(document).ready(readyFn); 
    })(jQuery);

</script>
于 2014-03-24T13:04:24.930 回答
10

另外，我找到了使用 jQuery noConflict 模式的好解决方案。

(function($){

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

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

我从这里 TryVary.com找到了这个解决方案。

于 2018-04-02T07:27:54.033 回答
9

您必须在 function() 中传递 $

<script>
jQuery(document).ready(function($){

// jQuery code is in here

});
</script>
于 2015-07-08T12:22:42.597 回答
9

用这样的替换$符号：jQuery

jQuery(function(){
//your code here
});
于 2018-02-19T08:06:16.370 回答
8

仔细检查您的 jQuery 引用。您可能不止一次地引用它，或者您过早地调用您的函数（在定义 jQuery 之前）。您可以按照我的评论中提到的方法进行尝试，并将任何 jQuery 引用放在文件顶部（在头部），看看是否有帮助。

如果您使用 jQuery 的封装，在这种情况下它不应该有帮助。请尝试一下，因为我认为它更漂亮更明显，但是如果没有定义 jQuery，你会得到同样的错误。

最后... jQuery 目前没有定义。

于 2015-05-18T20:12:48.383 回答
8

采用

jQuery(document).

代替

$(document).

或者

在函数中，$ 指向 jQuery，正如您所期望的那样

(function ($) {
   $(document).
}(jQuery));
于 2017-08-07T07:04:24.397 回答
7 
（函数（$）{
  “使用严格”；

  $（函数（）{

    //你的代码在这里

  });

}(jQuery));
于 2018-01-30T06:00:15.480 回答
5

什么对我有用。要导入的第一个库是查询库，然后调用 jQuery.noConflict() 方法。

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>
于 2016-03-21T11:16:20.523 回答
4 
<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

    $(document).ready(readyFn); 
    })(jQuery);

现在使用 jq 代替 jQuery

于 2015-09-30T05:29:09.147 回答
4

当您的函数名称和文件中的一个 id 名称相同时，您会遇到此问题。只需确保文件中的所有 id 名称都是唯一的。

于 2016-05-16T04:55:24.763 回答
3

您可以使用

jQuery(document).ready(function(){ ...... });

或者

(function ($) { ...... }(jQuery));
于 2019-03-12T05:36:26.930 回答
0 
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

如果您将 jquery 用于前端，则可以通过将 $deps 作为 jquery 传递来实现它

于 2021-10-16T16:52:09.190 回答