jQuery Uncaught TypeError : 정의되지 않은 'fn'속성 (익명 함수)을 읽을 수 없습니다.

jQuery Uncaught TypeError : 정의되지 않은 'fn'속성 (익명 함수)을 읽을 수 없습니다.

---

다운로드 한 일부 코드에서 오류가 발생합니다. 다음은 코드입니다.

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

전에 이런 유형의 오류를 본 사람이 있습니까? 이런 문제를 어떻게 해결할까요? 조언을 해주셔서 감사합니다!

---

이 시도:

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

---

bootstrap.js 전에 jQuery 라이브러리를 호출하십시오.

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

---

당신이 얻을 경우 캔은 정의되지 않은 재산 '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>

---

jquery CDN 을 먼저 가져옵니다.

(예)

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

---

나는 추가하여 고정 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>

---

Ha ha ha Funny 나에겐 단순한 실수

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>

Why it did this kind of behave: I got documentation on W3schools LINK

Definition and Usage async

The async attribute is a boolean attribute.

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

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)

2. If async is not present and defer is present: The script is executed when the page has finished parsing

3. If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

---

You can use noConflict function:

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

Change all $ to JJ.

---

When I used Electron + Angular such order helped me to solve problem

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

---

This error might also occur if you have require.js (requirejs) implemented and you did not wrap some lib that you are using inside

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

NOTE: you do not have to do this if this lib has AMD support. You can quickly check this by opening this lib and just ctrl+f "amd" :)

---

I too had the "Uncaught TypeError: Cannot read property 'fn' of undefined" with:

$.fn.circleType = function(options) {

CODE...

};

But fixed it by wrapping it in a document ready function:

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

CODE...

};

---

I had the same problem when using bootstrap-datewidget and i loaded jquery in the header instead of loading it at the end of the body and it worked.

---

I agree with MarsPeople regarding loading libraries in the wrong order. My example is from working with owl.carousel.

I got the same error when importing jquery after owl.carousel:

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

and fixed it by importing jquery before owl.carousel:

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

---

Hope it helps someone on earth. In my case jQuery and $ were available but not when the plugin bootstrapped so I wrapped everything inside a setTimeout. Wrapping inside setTimeout helped me fix the error:

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

    !function(t, e) {

    }(window);

})

참고URL : https://stackoverflow.com/questions/10807430/jquery-uncaught-typeerror-cannot-read-property-fn-of-undefined-anonymous-fun