jquery - llamar - pasar funcion como parametro javascript

jQuery Uncaught TypeError: no se puede leer la propiedad ''fn'' de undefined(función anónima)

Question

Todo, recibo un error de parte de mi código que descargué. Aquí está el código:

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

¿Alguien ha visto este tipo de error antes? ¿Cómo resolvería algo como esto? ¡Gracias por cualquier consejo que tengas!

Answer 1

Este error también puede ocurrir si tiene requirejs ( requirejs ) implementado y no requirejs alguna lib que está usando dentro

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

NOTA: no tiene que hacer esto si esta lib tiene soporte de AMD. Puede comprobar rápidamente esto abriendo esta lib y simplemente ctrl + f "amd" :)

Answer 2

Estoy de acuerdo con MarsPeople en cuanto a cargar bibliotecas en el orden incorrecto. Mi ejemplo es trabajar con owl.carousel.

Obtuve el mismo error al importar jquery después de owl.carousel:

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

y lo arregló importando jquery antes de owl.carousel:

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

Answer 3

Importe el jquery CDN como una primera

(p.ej)

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

Answer 4

Prueba esto:

(function ( $ ) { 

    // put all that "wl_alert" code here   

}( jQuery ));

Entonces, la variable $ está aparentemente dañada, pero la variable jQuery todavía debería referirse al objeto jQuery. (En circunstancias normales, las variables $ y jQuery referencia al (mismo) objeto jQuery).

En lugar de tener que reemplazar el nombre $ con el nombre jQuery en todo su código, puede simplemente usar un IIFE para alias el nombre manualmente. Entonces, la variable externa jQuery tiene un alias con la variable $ dentro de la función.

Aquí hay un ejemplo simple para ayudarlo a entender este concepto:

var foo = ''Peter'';

(function ( bar ) {

    bar // evaluates to ''Peter''

}( foo ));

Answer 5

Puede usar la función noConflict:

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

Cambiar todos $ a JJ.

Answer 6

Si obtiene No se puede leer la propiedad ''fn'' de undefined , el problema puede ser que cargue las bibliotecas en orden incorrecto.

Por ejemplo:

Debería cargar bootstrap.js primero y luego cargar las bibliotecas de 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 7

También encontré este problema cuando tengo el mismo JavaScript que la secuencia del problema a continuación.

Luego lo he arreglado agregando el jquery.slim.min.js después del jquery.slim.min.js , como la Secuencia de Solución.

Secuencia de problemas

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

Secuencia de solución

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

Tuve el mismo problema cuando usé bootstrap-datewidget y cargué jquery en el encabezado en lugar de cargarlo al final del cuerpo y funcionó.

Answer 9

Yo también tenía el "Unkeught TypeError: no se puede leer la propiedad ''fn'' de undefined" con:

$.fn.circleType = function(options) {

CODE...

};

Pero lo arreglé envolviéndolo en una función lista para documentos:

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

CODE...

};

Answer 10

intenta llamar a la biblioteca de jQuery antes de bootstrap.js

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