jquery - jQuery Uncaught TypeError：无法读取未定义的属性“fn”（匿名函数）

Question

所有，我从我下载的一些代码中得到一个错误。这是代码：

/*----------------------------------------------------------------------*/
/* 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;
};

有没有人见过这种类型的错误？我将如何解决这样的事情？感谢您的任何建议！

score 88 · Accepted Answer

尝试在 bootstrap.js 之前调用 jQuery 库

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

score 62 · Accepted Answer

尝试这个：

(function ( $ ) { 

    // put all that "wl_alert" code here   

}( jQuery ));

因此，该$变量显然已损坏，但该jQuery变量仍应引用 jQuery 对象。（在正常情况下，$和jQuery变量都引用（相同的）jQuery 对象。）

不必用整个代码中$的名称替换名称jQuery，您可以简单地使用IIFE手动为名称命名。因此，外部变量与函数内部的变量jQuery有别名。$

这里有一个简单的例子来帮助你理解这个概念：

var foo = 'Peter';

(function ( bar ) {

    bar // evaluates to 'Peter'

}( foo ));

score 32 · Accepted Answer

如果您无法读取 undefined 的属性“fn”，则问题可能是您以错误的顺序加载库。

例如：

您应该先加载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>

score 11 · Accepted Answer

首先导入jquery CDN

（例如）

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

score 6 · Accepted Answer

我通过在jquery.min.js之后添加jquery.slim.min.js作为解决方案序列来修复它。

问题序列

<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

解决方案序列

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

score 5 · Accepted Answer

哈哈哈有趣的是对我来说这是一个简单的错误

我得到async了我的jquery库调用。只需删除它，我就得到了解决方案。

<script async src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

至

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

为什么会出现这种行为：我在 W3schools LINK上获得了文档

定义和使用异步

async 属性是一个布尔属性。

如果存在，它指定脚本将在可用时立即异步执行。

注意： async 属性仅适用于外部脚本（并且仅应在存在 src 属性时使用）。

注意：有几种方法可以执行外部脚本：

1. 如果存在异步：脚本与页面的其余部分异步执行（脚本将在页面继续解析的同时执行）

2. 如果async不存在而defer存在：页面解析完成后执行脚本

3. 如果 async 或 defer 都不存在：在浏览器继续解析页面之前，立即获取并执行脚本

score 3 · Accepted Answer

您可以使用 noConflict 功能：

var JJ= jQuery.noConflict(); 
JJ('.back').click(function (){
    window.history.back();
});

将所有 $ 更改为 JJ。

score 3 · Accepted Answer

当我使用 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>

score 2 · Accepted Answer

我也有“未捕获的类型错误：无法读取未定义的属性'fn'”：

$.fn.circleType = function(options) {

CODE...

};

但是通过将其包装在文档就绪函数中来修复它：

jQuery(document).ready.circleType = function(options) {

CODE...

};

score 1 · Accepted Answer

如果您实现了 require.js ( requirejs ) 并且您没有包装您正在使用的一些库，也可能会发生此错误

define(['jquery'], function( jQuery ) { ... lib function ... });

注意：如果此库支持 AMD，则不必这样做。你可以通过打开这个库来快速检查这个，只需 ctrl+f "amd" :)

score 1 · Accepted Answer

我有同样的问题，我是这样做的

//注意我在上面单独添加了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 -->

它有效

score 0 · Accepted Answer

我在使用 bootstrap-datewidget 时遇到了同样的问题，我在标题中加载了 jquery，而不是在正文的末尾加载它并且它有效。

score 0 · Accepted Answer

就我而言，我将 undefine 变量发送到 ajax 数据属性，这就是 ajax 不发送的原因。

score 0 · Accepted Answer

我同意 MarsPeople 关于以错误顺序加载库的观点。我的例子来自使用 owl.carousel。

在 owl.carousel 之后导入 jquery 时出现同样的错误：

<script src="owl.carousel.js"></script>
<script src="jquery-3.1.1.min.js"></script>

并通过在 owl.carousel 之前导入 jquery 来修复它：

<script src="jquery-3.1.1.min.js"></script>
<script src="owl.carousel.js"></script>

score 0 · Accepted Answer

希望它可以帮助地球上的某个人。在我的情况下，jQuery 和 $ 可用，但在插件引导时不可用，所以我将所有内容都包装在 setTimeout 中。包装内 setTimeout 帮助我修复了错误：

setTimeout(() => {
    /** Your code goes here */

    !function(t, e) {

    }(window);

})

jquery - jQuery Uncaught TypeError：无法读取未定义的属性“fn”（匿名函数）

15 回答 15

Related

Reference