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

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

Answer 1

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

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

Answer 2

试试这个:

(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 ));

Answer 3

如果你得到无法读取未定义的属性'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>

Answer 4

导入jQuery的CDN作为第一

(例如)

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

Answer 5

我通过在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>

Answer 6

哈哈哈好笑，对我来说这是一个简单的错误

我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. 如果不存在异步并且存在延迟：在页面完成解析后执行脚本

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