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>