Wordpress 如何使用 jquery 和 $ 符号答案

【问题标题】：Wordpress how to use jquery and $ signWordpress 如何使用 jquery 和 $ 符号
【发布时间】：2012-09-02 20:22:29
【问题描述】：

我在 WordPress 插件中有一个简单的 jQuery 脚本，它使用这样的 jQuery 包装器：

$(document).ready(function(){

    // jQuery code is in here

});

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

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

TypeError: $ 不是函数

$(document).ready(function(){

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

(function($){

    // jQuery code is in here

})(jQuery);

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

任何帮助将不胜感激。

【问题讨论】：

如果您在控制台中输入$ 并回车 - 您会看到什么？
在控制台中运行 $ 时，我收到“未定义”

标签： jquery wordpress

【解决方案1】：

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

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

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

jQuery(function ($) { ...

【讨论】：

我尝试了第二个版本，但它不起作用，第一个版本可以，但我只是想确保我不会在调用 jQuery 时加倍。
@Jason 你甚至不需要那个；正是我发布的内容：jsfiddle.net/vcbYJ
你能看到这个问题吗wordpress.stackexchange.com/questions/214858/…
如果任何选择器在jQuery(function ($) { ...之外，你必须使用jQuery而不是$

【解决方案2】：

这应该可以解决它：

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

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

来自他们的文档：

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

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

【讨论】：

【解决方案3】：

这个解决方案对我有用

;(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找到了上面的解决方案

...搜索太多后

【讨论】：

很棒的解决方案。这样做的主要原因是因为 ";" 关闭了已经活动的任何其他 jquery 实例，同时它在本地声明了另一个新实例。当您只有几秒钟的时间在生产中实现布局或运行大量的 wordpress 插件时，这可以做得很好。但是，请注意，您必须解决问题，这只是一个创可贴，但如果它是一个信息页面就可以了。
@Martha James 这对我有用，所以包括在内。它可能适用于其他人，也可能不适用

【解决方案4】：

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/

【讨论】：

【解决方案5】：

你可以避免这样的冲突

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  alert("Hi this will not conflict now");
  jq('selector').show();
});

【讨论】：

或 $=jQuery.noConflict();

【解决方案6】：

试试这个：

<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>

【讨论】：

【解决方案7】：

另外，我找到了使用 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);

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

【讨论】：

【解决方案8】：

你必须在function()中传递$

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

// jQuery code is in here

});
</script>

【讨论】：

这与上面给出的答案（三年前）有何不同？

【解决方案9】：

将$ 符号替换为jQuery 像这样：

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

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

我认为它不是在定义之前尝试访问 JQuery，这反过来又破坏了一切。尝试将引用 JQuery 的 script 移动到 index.html 的顶部，它可能会起作用
这个答案需要更多的可见性。是的，如果标准名称空间与通过其他插件加载的 jQuery 版本一起使用，则其他名称是有效的。但请检查您是否无意（并且可能不必要地）多次加载 jQuery。

【解决方案11】：

使用

jQuery(document).

而不是

$(document).

或

在函数中，$ 指向你所期望的 jQuery

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

【讨论】：

【解决方案12】：

(函数($){
  “使用严格”；

  $（函数（）{

    //你的代码在这里

  });

}(jQuery));

【讨论】：

【解决方案13】：

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

<head>
 <script type="text/javascript" src="jquery.min.js"/>
 <script>
  var jq = jQuery.noConflict();
  jq(document).ready(function(){
  //.... your code here
    });
 </script>

【讨论】：

【解决方案14】：

<script>
var jq=jQuery.noConflict();
(function ($) 
    {
    function nameoffunction()
    {
        // Set your code here!!
    }

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

现在使用 jq 代替 jQuery

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

你可以使用

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

或

(function ($) { ...... }(jQuery));

【讨论】：

【解决方案17】：

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

如果你使用 jquery 作为前端，你可以通过将 $deps 作为 jquery 来实现它

【讨论】：