jQuery - no es un error de la función

Question

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?

Answer 1

Este problema es "mejor" resuelto mediante el uso de un anonymous function a pasar en el objeto jQuery así:

la función anónima se parece a:

<script type="text/javascript"> 
    (function($) { 
     // You pass-in jQuery and then alias it with the $-sign 
     // So your internal code doesn't change 
    })(jQuery); 
</script> 

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

lo que el código se vería así:
Por supuesto, es posible que desee hacer algunos cambios en su código interno, pero usted consigue la idea.

<script type="text/javascript"> 
    (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'); 
       }); 
      }); 
     } 
    })(jQuery); 
</script> 

Answer 2

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, utilice jQuery.noConflict justo antes de su (function($){:

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

Answer 3

cambio

}); 


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

a

})(jQuery); //<-- ADD THIS 


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

Esto es necesario porque, es necesario llamar a la función anónima que creaste con

(function($){ 

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

Además, tendrá que cambiar todo el this.-$(this)., excepto la primera, en la que se hace return this.each

En el primero (donde no es necesario 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 se refiere al elemento DOM específico, por lo que debe envolverlo en $().

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

Answer 4

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

Cambiado

function editForm(value) 

a

function editTheForm(value) 

funciona perfectamente.

Answer 5

Al convertir un prototipo formulario web ASP.Net MVC a un sitio Tengo estos errores:

TypeError: $(...).accordion is not a function
$("#accordion").accordion(

---

$('#dialog').dialog({
TypeError: $(...).dialog is not a function

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

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

comentario hacia fuera para ver si los errores desaparecen. Luego, resuélvelo en BundlesConfig:

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

Answer 6

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.