jquery – no es un error de función

Aquí está mi código:

(function($){ $.fn.pluginbutton = function (options) { myoptions = $.extend({ left: true }); return this.each(function () { var focus = false; if (focus === false) { this.hover(function () { this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }, function () { this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').removeClass('VBHover'); }); } this.mousedown(function () { focus = true this.animate({ backgroundPosition: "0 30px" }, { duration: 0 }); this.addClass('VBfocus').removeClass('VBHover'); }, function () { focus = false; this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }); }); } }); $(document).ready(function () { $('.smallTabsHeader a').pluginbutton(); }); 

Me da un error. ¿Qué pasa?

Este problema se resuelve “mejor” mediante el uso de una función anónima para transferir el objeto jQuery de esta manera:

La función anónima se ve así:

  

Este es el método de JavaScript para implementar (deficiente) ‘Dependency Injection’ cuando se usa junto con elementos como ‘Module Pattern’.

Entonces su código se vería así:
Por supuesto, es posible que desee realizar algunos cambios en su código interno ahora, pero entiende la idea.

  

cambio

 }); $(document).ready(function () { $('.smallTabsHeader a').pluginbutton(); }); 

a

 })(jQuery); //< -- ADD THIS $(document).ready(function () { $('.smallTabsHeader a').pluginbutton(); }); 

Esto es necesario porque necesita llamar a la función anónima que creó con

 (function($){ 

y observe que espera un argumento que usará internamente como $ , por lo que debe pasar una referencia al objeto jQuery.

Además, deberá cambiar todo this. a $(this). , excepto el primero, en el que return this.each

En el primero ( donde no necesita el $() ) es porque en el cuerpo del complemento, this contiene una referencia al objeto jQuery que coincide con su selector, pero en cualquier lugar más profundo que eso, this refiere al elemento DOM específico, por lo que necesitas envolverlo en $() .

Código completo en http://jsfiddle.net/gaby/NXESk/

El problema surge cuando un sistema diferente toma la variable $. Tiene múltiples $ variables que se utilizan como objetos de múltiples bibliotecas, lo que da como resultado el error.

Para resolverlo, use jQuery.noConflict justo antes de su (function($){ :

 jQuery.noConflict(); (function($){ $.fn.pluginbutton = function (options) { ... 

Al convertir un prototipo de formulario web ASP.Net en un sitio MVC obtuve estos errores:

TypeError: $ (…). Accordion no es una función
$ (“# acordeón”). acordeón (


Diálogo $ (‘# diálogo’). ({
TypeError: $ (…). Diálogo no es una función

Funcionó bien en los formularios web. El problema / solución era esta línea en _Layout.cshtml

 @Scripts.Render("~/bundles/jquery") 

Coméntelo para ver si los errores desaparecen. Luego, resuélvelo en BundlesConfig:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); 

Lo resolví cambiando el nombre de mi función.

Cambiado

 function editForm(value) 

a

 function editTheForm(value) 

Funciona perfectamente.

En mi caso, el mismo error tenía una solución mucho más fácil. Básicamente mi función estaba en un archivo .js que no estaba incluido en el aspx actual que se mostraba. Todo lo que necesitaba era la línea de inclusión.

Funciona en mi caso:

 import * as JQuery from "jquery"; const $ = JQuery.default;