jQuery Uncaught TypeError：无法读取未定义的属性“fn”（匿名函数）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10807430/
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
jQuery Uncaught TypeError: Cannot read property 'fn' of undefined (anonymous function)
提问by user1048676
All, I'm getting an error from some of my code that I downloaded. Here is the code:
所有，我从我下载的一些代码中得到一个错误。这是代码：
/*----------------------------------------------------------------------*/
/* wl_Alert v 1.1
/* description: Handles alert boxes
/* dependency: jquery UI Slider, fadeOutSlide plugin
/*----------------------------------------------------------------------*/
$.fn.wl_Alert = function (method) {
var args = arguments;
return this.each(function () {
var $this = $(this);
if ($.fn.wl_Alert.methods[method]) {
return $.fn.wl_Alert.methods[method].apply(this, Array.prototype.slice.call(args, 1));
} else if (typeof method === 'object' || !method) {
if ($this.data('wl_Alert')) {
var opts = $.extend({}, $this.data('wl_Alert'), method);
} else {
var opts = $.extend({}, $.fn.wl_Alert.defaults, method, $this.data());
}
} else {
$.error('Method "' + method + '" does not exist');
}
if (!$this.data('wl_Alert')) {
$this.data('wl_Alert', {});
//bind click events to hide alert box
$this.bind('click.wl_Alert', function (event) {
event.preventDefault();
//Don't hide if it is sticky
if (!$this.data('wl_Alert').sticky) {
$.fn.wl_Alert.methods.close.call($this[0]);
}
//prevent hiding the box if an inline link is clicked
}).find('a').bind('click.wl_Alert', function (event) {
event.stopPropagation();
});
} else {
}
//show it if it is hidden
if ($this.is(':hidden')) {
$this.slideDown(opts.speed / 2);
}
if (opts) $.extend($this.data('wl_Alert'), opts);
});
};
$.fn.wl_Alert.defaults = {
speed: 500,
sticky: false,
onBeforeClose: function (element) {},
onClose: function (element) {}
};
$.fn.wl_Alert.version = '1.1';
$.fn.wl_Alert.methods = {
close: function () {
var $this = $(this),
opts = $this.data('wl_Alert');
//call callback and stop if it returns false
if (opts.onBeforeClose.call(this, $this) === false) {
return false;
};
//fadeout and call an callback
$this.fadeOutSlide(opts.speed, function () {
opts.onClose.call($this[0], $this);
});
},
set: function () {
var $this = $(this),
options = {};
if (typeof arguments[0] === 'object') {
options = arguments[0];
} else if (arguments[0] && arguments[1] !== undefined) {
options[arguments[0]] = arguments[1];
}
$.each(options, function (key, value) {
if ($.fn.wl_Alert.defaults[key] !== undefined || $.fn.wl_Alert.defaults[key] == null) {
$this.data('wl_Alert')[key] = value;
} else {
$.error('Key "' + key + '" is not defined');
}
});
}
};
//to create an alert box on the fly
$.wl_Alert = function (text, cssclass, insert, after, options) {
//go thru all
$('div.alert').each(function () {
var _this = $(this);
//...and hide if one with the same text is allready set
if (_this.text() == text) {
_this.slideUp($.fn.wl_Alert.defaults.speed);
}
});
//create a new DOM element and inject it
var al = $('<div class="alert ' + cssclass + '">' + text + '</div>').hide();
(after) ? al.appendTo(insert).wl_Alert(options) : al.prependTo(insert).wl_Alert(options);
//return the element
return al;
};
Has anyone seen this type of error before? How would I resolve something like this? Thanks for any advice you have!
有没有人见过这种类型的错误？我将如何解决这样的事情？感谢您的任何建议！
采纳答案by ?ime Vidas
Try this:
尝试这个：
(function ( $ ) {
// put all that "wl_alert" code here
}( jQuery ));
So, the $variable is apparently corrupted, but the jQueryvariable should still refer to the jQuery object. (In normal circumstances, both the $and jQueryvariables refer to the (same) jQuery object.)
因此，该$变量显然已损坏，但该jQuery变量仍应引用 jQuery 对象。（在正常情况下，变量$和jQuery变量都引用（相同的）jQuery 对象。）
Instead of having to replace the $name with the jQueryname in your entire code, you can simply use an IIFEto alias the name manually. So, the outside-variable jQueryis aliased with the $variable inside the function.
不必在整个代码$中用jQuery名称替换名称，您只需使用IIFE手动为名称设置别名。因此，外部变量jQuery与$函数内部变量具有别名。
Here's a simple example to help you understand this concept:
下面是一个简单的例子来帮助你理解这个概念：
var foo = 'Peter';
(function ( bar ) {
bar // evaluates to 'Peter'
}( foo ));
回答by Said El-Ghamri
try to call jQuery library before bootstrap.js
尝试在 bootstrap.js 之前调用 jQuery 库
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
回答by MarsPeople
If you get Cannot read property 'fn' of undefined, the problem may be you loading libraries in wrong order.
如果您得到无法读取 undefined 的属性 'fn'，则问题可能是您以错误的顺序加载库。
For example:
例如：
You should load bootstrap.jsfirst and then load bootstrap.jslibraries.
您应该先加载bootstrap.js，然后加载bootstrap.js库。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
回答by sanzmalz
Import the jquery CDNas a first
导入jQuery的CDN作为第一
(e.g)
（例如）
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
回答by Khachornchit Songsaen
I fixed it by added the jquery.slim.min.jsafter the jquery.min.js, as the Solution Sequence.
我通过在jquery.min.js之后添加jquery.slim.min.js作为解决方案序列来修复它。
Problem Sequence
问题序列
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
Solution Sequence
解决方案顺序
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/jquery/jquery.slim.min.js"></script>
<script src="./vendor/jquery-easing/jquery.easing.min.js"></script>
回答by MD Ashik
Ha ha ha Funny it's a simple mistake for me
哈哈哈 有趣的是对我来说这是一个简单的错误
I got asyncon my jquerylibrary call. Just remove it and I got solution.
我接到async了jquery库调用。只需删除它，我就得到了解决方案。
<script async src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
TO
到
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Why it did this kind of behave:I got documentation on W3schools LINK
为什么会出现这种行为：我在 W3schools LINK上获得了文档
Definition and Usage async
定义和用法 async
The async attribute is a boolean attribute.
async 属性是一个布尔属性。
When present, it specifies that the script will be executed asynchronously as soon as it is available.
当存在时，它指定脚本一可用就异步执行。
Note:The async attribute is only for external scripts (and should only be used if the src attribute is present).
注意：async 属性仅适用于外部脚本（并且只应在 src 属性存在时使用）。
Note:There are several ways an external script can be executed:
注意：有几种方法可以执行外部脚本：
1.If async is present:The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
1.如果存在 async：脚本与页面的其余部分异步执行（脚本将在页面继续解析的同时执行）
2.If async is not present and defer is present:The script is executed when the page has finished parsing
2.如果async不存在而defer存在：当页面解析完成时执行脚本
3.If neither async or defer is present:The script is fetched and executed immediately, before the browser continues parsing the page
3.如果 async 或 defer 都不存在：在浏览器继续解析页面之前，立即获取并执行脚本
回答by Susha Denis
When I used Electron + Angular such order helped me to solve problem
当我使用 Electron + Angular 时，这样的命令帮助我解决了问题
<script src="./assets/js/jquery-3.3.1.min.js"></script>
<script src="./assets/js/jquery-3.3.1.slim.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
回答by Victor Azevedo
You can use noConflict function:
您可以使用 noConflict 函数：
var JJ= jQuery.noConflict();
JJ('.back').click(function (){
window.history.back();
});
Change all $ to JJ.
将所有 $ 更改为 JJ。
回答by Levi Josman
I too had the "Uncaught TypeError: Cannot read property 'fn' of undefined" with:
我也有“未捕获的类型错误：无法读取未定义的属性‘fn’”：
$.fn.circleType = function(options) {
CODE...
};
But fixed it by wrapping it in a document ready function:
但是通过将其包装在文档就绪函数中来修复它：
jQuery(document).ready.circleType = function(options) {
CODE...
};
回答by Napster777
I had the same problem and I did it this way
我有同样的问题，我是这样做的
//note that I added jquery separately above this
//注意我在这上面单独添加了jquery
<!--ENJOY HINT PACKAGES --START -->
<link href="path/enjoyhint/jquery.enjoyhint.css" rel="stylesheet">
<script src="path/enjoyhint/jquery.enjoyhint.js"></script>
<script src="path/enjoyhint/kinetic.min.js"></script>
<script src="path/enjoyhint/enjoyhint.js"></script>
<!--ENJOY HINT PACKAGES --END -->
and it works
它有效
