javascript 未捕获的类型错误：对象 [object Object] 的属性“jQuery”不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19556751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function
提问by chongzixin
I am building a web widget on jquery from the tutorial found here.
我正在从这里找到的教程中在 jquery 上构建一个 web 小部件。
Basically, it checks if jQuery is loaded otherwise loads it. My widget merely shows a button and onClick shows a fancybox which loads an iframe.
基本上，它会检查 jQuery 是否已加载，否则会加载它。我的小部件仅显示一个按钮，而 onClick 显示一个加载 iframe 的花式框。
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else { // Other browsers
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
// We can use jQuery 1.4.2 here
/**** LOAD FANCYBOX ******/
$.getScript("fancyboxURL");
// I also tried loading fancybox here but that didnt work either
$(".fancybox").fancybox();
});
}
})(); // We call our anonymous function immediately
When loading the page I am getting the below errors.
加载页面时，我收到以下错误。
Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2
Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js?v=1.0.7:19
Uncaught TypeError: Property '$' of object [object Object] is not a function
Some attempts
一些尝试
In the file which the error Property "$" ....error is coming from, it currently reads
在错误Property "$" ....错误来自的文件中，它当前读取
$(document).ready(function(){
$(".fancybox").fancybox();
});
From other threads I have found that I should try with
从其他线程我发现我应该尝试
jQuery(function($){
$(".fancybox").fancybox();
});
but that only gave me Property "jQuery" of object is not a function.
但那只给了我Property "jQuery" of object is not a function。
I know the code works fine because if I manually include jQueryin my html file it works.
我知道代码工作正常，因为如果我手动包含jQuery在我的 html 文件中，它就可以工作。
My HTML file below:-
我的 HTML 文件如下：-
<html>
<head>
<!-- IF I UNCOMMENT THE BELOW LINE IT WORKS! Add jQuery library -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>-->
</head>
<body>
<!-- load widget -->
<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>
<div id="widget-container"></div>
</body>
</html>
And the markup generated when I Inspect Element on Chrome seems to indicate that jQuery is loaded.
我在 Chrome 上检查元素时生成的标记似乎表明 jQuery 已加载。
回答by t.niese
There are at least three problems (probably more).
至少存在三个问题（可能更多）。
You use jQuery.noConflict(true), the truetells jQuery, that you want to not only restore the window.$that was set before jQuerywas loaded but also the window.jQuery.
您使用jQuery.noConflict(true)，true告诉jQuery，您不仅要恢复加载jQuerywindow.$之前设置的.window.jQuery
If no jQuerywas loaded on the page the global object window.jQuerystays undefined.
To get fancybox working it needs jQuery to be available in the globale scope, which is not that case in your situation. Thats why you get this error message:
如果 页面上没有加载jQuery，则全局对象window.jQuery保持为undefined。要使fancybox 正常工作，它需要在全局范围内使用jQuery，而在您的情况下并非如此。这就是您收到此错误消息的原因：
Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2
未捕获的类型错误：未定义不是函数 jquery.fancybox.pack.js?v=2.1.5:2
Then you have this error message:
然后你有这个错误信息：
Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js
未捕获的类型错误：无法读取未定义的 jquery.fancybox-thumbs.js 的属性“fancybox”
This shows that you load jquery.fancybox-thumbs.jssomewhere, at a time where jQueryis not available in the global scope (most likely same reason as above), trying to access fancyboxwhich is not assigned to jQuery because of the above reason.
这表明您在全局范围内不可用的jquery.fancybox-thumbs.js某个时间加载某处jQuery（很可能与上述原因相同），尝试访问fancybox由于上述原因未分配给 jQuery 的内容。
About the last error message:
关于最后一条错误消息：
Uncaught TypeError: Property '$' of object [object Object] is not a function
未捕获的类型错误：对象 [object Object] 的属性“$”不是函数
If this happens in your posted code when you call $(document).ready( ... ), then it is because jQuery is not assigned to $(noConflict). But jQuery(document).ready( ... )in the mainshould work (you should fix the errors in the order they occur, to be sure that the others are not follow up errors)
如果在调用 时在您发布的代码中发生这种情况$(document).ready( ... )，那是因为 jQuery 未分配给$( noConflict)。但是jQuery(document).ready( ... )在main应该工作中（您应该按照错误发生的顺序修复错误，以确保其他错误不是后续错误）
Another problem you have, that will appear when you you solved the other problems is with:
当您解决其他问题时，您遇到的另一个问题是：
$.getScript("fancyboxURL");
// I also tried loading fancybox here but that didnt work either
$(".fancybox").fancybox();
$.getScript("fancyboxURL");loads scripts async, so in nearly every case facnyboxis not loaded at the time you call $(".fancybox").fancybox();.
$.getScript("fancyboxURL");负载脚本异步，所以在几乎所有情况下facnybox是不是在你打电话时加载$(".fancybox").fancybox();。
EDIT
编辑
For widget code I would suggest that you host all your libraries yourself or use libraries that support AMD and a loader where you can create a loading context for the modules. I currently can suggest you one, because we have an own loader.
对于小部件代码，我建议您自己托管所有库或使用支持 AMD 的库和一个加载器，您可以在其中为模块创建加载上下文。我目前可以向您推荐一个，因为我们有自己的装载机。
Another solution would be to host all your jQuery plugins yourself and wrap them into a callbackfunction.
另一种解决方案是自己托管所有 jQuery 插件并将它们包装成一个callback函数。
Something like that:
类似的东西：
function myWidgetScript_s7d8f6_fancybox(jQuery, $) {
//the original code that is in the fancybox.js file
}
myWidgetScript_[some number to avoid conflicts]_[name of you modified script]
myWidgetScript_[一些避免冲突的数字]_[你修改过的脚本的名字]
And in your code do something like this
在你的代码中做这样的事情
jQuery.getScript( "modified.fancybox.js", function() {
myWidgetScript_s7d8f6_fancybox(jQuery, jQuery);
jQuery(".fancybox").fancybox();
});
回答by ethree
You need to make sure any javascript you do on the webpage is inside the "We can use jQuery 1.4.2 here" section. If it's outside of that section, the browser will not be aware of jQuery.
您需要确保您在网页上执行的任何 javascript 都在“我们可以在此处使用 jQuery 1.4.2”部分中。如果它在该部分之外，浏览器将无法识别 jQuery。
回答by loxxy
The fancybox widget uses jQuery. So you have to include it, before you use it.
Fancybox 小部件使用 jQuery。所以你必须在使用它之前包含它。
So the flow would be
所以流量是
- include jQuery (no need to check, if it's the first thing anyway)
- include fancybox
- Use document ready to initialize fancybox, as above.
- 包含 jQuery（无需检查，如果它是第一件事）
- 包括fancybox
- 使用文档准备好初始化fancybox，如上。
Something like this:
像这样的东西：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".fancybox").fancybox();
});
</script>
回答by Rohan Kumar
Try this,
试试这个，
<script>
// code to load jquery version 1.4.2 if not exists
(window.jQuery && window.jQuery.fn.jquery !== '1.4.2') ||
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>');
</script>
<!-- include your fancybox plugin to work properlly -->
<script src="path_of_your_js_folder/fancybox-plugin.js"></script>
<script>
// code to initialize your fancybox
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
