Evitar conflictos de jQuery

jQuerynoConclict

Seguramente alguna vez hayas añadido en tu proyecto Web código jQuery de terceros o cualquier otra librería de jQuery para crear las impresionantes animaciones que nos ofrece este.

Cuando unes varios códigos de terceros te pueden surgir problemas de compatibilidad entre ellos, pero afortunadamente jQuery ha creado una función para solucionar este problema y es tan fácil como agregar a tu código:

jQuery.noConflict();

[sourcecode language=”php”]
<–SLIDER–>
<script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" src="/js/Slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").Slider();
});
</script>

<–LIGHTBOX–>
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel=’Ejemplo1′]").colorbox();
$("a[rel=’Ejemplo2’]").colorbox();
$("a[rel=’Ejemplo2′]").colorbox();
});
</script>
[/sourcecode]

Tendríamos un conflicto entre las dos librerías ( SLIDER, LIGHTBOX ) una de ellas dejaría de funcionar, para evitarlo, en cualquiera de ellos añadiríamos jQuery.noConflict(); y sustituiríamos todos los $ por la palabra jQuery.

[sourcecode language=”php”]
<span style="color: #ff6600;"><!–LIGHTBOX–></span>
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("a[rel=’Ejemplo1′]").colorbox();
jQuery("a[rel=’Ejemplo2’]").colorbox();
jQuery("a[rel=’Ejemplo2′]").colorbox();
});
</script>
[/sourcecode]

¿Sencillo verdad? Pero alguien se puede preguntar, ¿y si tengo tres librerías?, bien pues solamente deberíamos asignar una variable a jQuery.noConflict y utilizarla de la misma forma:

[sourcecode language=”php”]

<span style="color: #ff6600;"><!–LIGHTBOX–></span>
<script src="/colorbox/jquery.lightbox.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function(){
j("a[rel=’Ejemplo1′]").colorbox();
j("a[rel=’Ejemplo2’]").colorbox();
j("a[rel=’Ejemplo2′]").colorbox();
});
</script>
[/sourcecode]

También funciona para conflictos entre Prototype y Scriptaculous. Recuerda, usa jQuery.noConflict con cabeza y no abuses si no es necesario.

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.