Wordpress如何使用jquery和$ sign

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

$(document).ready(function(){


// jQuery code is in here


});

我从WordPress仪表板内调用这个脚本,并在jQuery框架加载后加载它。

当我在Firebug中检查页面时,我不断地收到错误消息:

$不是一个函数

$(文档)时函数(){

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

(function($){


// jQuery code is in here


})(jQuery);

我有这个错误相当多次,我不知道如何处理它。

任何帮助都将不胜感激。

637626 次浏览

这应该解决它:

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)。这是为了防止 与其他JavaScript库的兼容性问题 可以链接。< / p >

在noConflict()模式下,jQuery的全局$快捷方式不是 可用…< / p >

默认情况下,当你在Wordpress中排队jQuery时,你必须使用jQuery,而不使用$(这是为了与其他库兼容)。

你在function中包装它的解决方案将工作得很好,或者你可以用其他方式加载jQuery(但在Wordpress中这可能不是一个好主意)。

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

jQuery(function ($) { ...

试试这个:

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

这个解决方案对我很有效

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

...在寻找太多之后

你可以避免这样的冲突

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

仔细检查jQuery引用。有可能您多次引用它,或者您过早地调用了函数(在jQuery定义之前)。你可以尝试在我的评论中提到的,把任何jQuery引用放在你的文件的顶部(在头部),看看是否有帮助。

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

最后……jQuery目前还没有定义。

你必须传递$ in function()

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


// jQuery code is in here


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


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

现在用jq代替jQuery

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

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

当函数名和文件中的某个id名相同时,就会遇到这个问题。只要确保文件中所有的id名称都是唯一的。

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/

使用

jQuery(document).

而不是

$(document).

在函数中,$如您所料指向jQuery

(function ($) {
$(document).
}(jQuery));
(function( $ ) {
"use strict";


$(function() {


//Your code here


});


}(jQuery));

jQuery替换$符号 这样的:< / p >

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

此外,我发现了使用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中找到了这个解决方案。

你可以使用

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

(function ($) { ...... }(jQuery));
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

如果你使用jquery作为前端,你可以通过jquery传递$deps来实现