jquery - jQuery Uncaught TypeError：undefined（無名関数）のプロパティ'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オブジェクトを参照します。）

コード全体で名前$を名前に置き換える代わりに、 IIFEを使用して名前を手動でエイリアス化することができます。したがって、outside-variableは、関数内の変数でエイリアス化されます。jQueryjQuery$

この概念を理解するのに役立つ簡単な例を次に示します。

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

jqueryCDNを最初にインポートします

（例えば）

<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

ハッハッハおかしいそれは私にとって単純な間違いです

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>

なぜこのような動作をしたのか： W3schoolsLINKのドキュメントを入手しました

定義と使用法の非同期

async属性はブール属性です。

存在する場合、スクリプトが使用可能になるとすぐに非同期で実行されることを指定します。

注： async属性は外部スクリプト専用です（src属性が存在する場合にのみ使用する必要があります）。

注：外部スクリプトを実行する方法はいくつかあります。

1. 非同期が存在する場合：スクリプトはページの残りの部分と非同期で実行されます（ページが解析を続行している間、スクリプトは実行されます）

2. asyncが存在せず、deferが存在する場合：ページの解析が終了すると、スクリプトが実行されます。

3. 非同期も遅延も存在しない場合：ブラウザがページの解析を続行する前に、スクリプトがフェッチされてすぐに実行されます

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

私も「UncaughtTypeError：Undefinedのプロパティ'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をサポートしている場合は、これを行う必要はありません。このlibを開き、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をロードする代わりに、ヘッダーにjqueryをロードしました。

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

})

score 0 · Accepted Answer

私の場合、undefine変数をajaxデータプロパティに送信しているため、ajaxは送信していません。

jquery - jQuery Uncaught TypeError：undefined（無名関数）のプロパティ'fn'を読み取れません

15 に答える 15

Related

Reference