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

时间：2012-05-29 22:10:47

标签： jquery

全部， 我从我下载的一些代码中收到错误。这是代码：

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

之前有没有人见过这种错误？我怎么解决这样的事情？谢谢您的任何建议！

14 个答案:

答案 0 :(得分：65)

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

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

答案 1 :(得分：57)

试试这个：

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

答案 2 :(得分：26)

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

答案 3 :(得分：9)

将 jquery CDN 导入为第一个

（例如）

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

答案 4 :(得分：4)

  

我通过在 jquery.slim.min.js 之后添加来修复它    jquery.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>

答案 5 :(得分：3)

您可以使用noConflict功能：

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

将所有$更改为JJ。

答案 6 :(得分：2)

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

我在 jquery 库调用中得到了 async 。只需将其删除，我就会找到解决方法。

<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属性仅适用于外部脚本（仅当存在src属性时才应使用）。

注意：可以通过多种方式执行外部脚本：

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

2。 如果不存在异步且存在延迟：该脚本在页面解析完成后执行

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

答案 7 :(得分：1)

如果你实现了require.js（requirejs）并且你没有包装你正在使用的一些lib，那么也可能发生这个错误

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

注意：如果此lib具有AMD支持，则不必执行此操作。您可以通过打开此库快速检查这一点，只需按ctrl + f＆＃34; amd＆＃34; ：）

答案 8 :(得分：1)

我也有＃34;未捕获的TypeError：无法读取属性＆＃39; fn＆＃39;未定义＆＃34;用：

$.fn.circleType = function(options) {

CODE...

};

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

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

CODE...

};

答案 9 :(得分：0)

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

答案 10 :(得分：0)

我同意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>

答案 11 :(得分：0)

希望它可以帮助地球上的某人。在我的情况下，jQuery和$可用，但在插件启动时不可用，因此我将所有内容包装在setTimeout中。 将setTimeout包裹起来可以帮助我修复错误：

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

    !function(t, e) {

    }(window);

})

答案 12 :(得分：0)

当我使用Electron + Angular时，这样的顺序帮助我解决了问题

module "key_pair" {
    path = "path/to/module"

    key_pair_names = [
        "keyname1",
        "keyname2",
        "keyname3"
    ]
}

答案 13 :(得分：0)

我遇到了同样的问题，而且我也是这样

//请注意，我在此上方分别添加了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 -->

它有效

相关问题
最新问题