comment utiliser la propriété jquery.noConflict

Question

Je suis en train de tester ma page Web sur un serveur à l'aide de dns de prévisualisation. Je viens de réaliser que preview dns ajoute automatiquement la bibliothèque mootools vers la fin de toute page php. Probablement pour leurs propres statistiques ou quelque chose.

Mais le problème est que j'utilise jquery dans ma page. Donc, mon code jquery se brise parce que mootools et jquery utilisent tous deux '$'.

J'ai mis toute la page source de ma page sur jsbin: http://jsbin.com/ozime (ceci inclut l'ajout sur mootools).

Dans cette page, j'ai ajouté un exemple de code jquery qui devrait se déclencher lors du changement de la liste déroulante. J'ai ajouté quelques déclarations d'alerte. Cependant, seule la première déclaration d'alerte apparaît. Un code jquery interne ne le fait pas.

J'ai essayé d'utiliser jquery sans conflit mais cela ne semble pas fonctionner.

Est-ce que quelqu'un a été confronté à ce problème?

Answer 1

Après avoir inclus jQuery, ajoutez ce qui suit immédiatement dans une balise de script.

<script> 
jQuery.noConflict(); 

jQuery(document).ready(function() { 
alert('hi'); 
}); 
</script> 

Placez également votre script jQuery avant votre bibliothèque mootools. Ordre sera:

scripts jQuery comprennent

code noConflict

script Mootools comprennent

Answer 2

au lieu de j (function() ...

essayer

j(document).ready 
(
    function() 
    { 
    alert("here"); 
    j("select#rooms") 
    .change 
    (
     function() 
     { 
     alert("here1"); 
     } 
    ) 
    } 
); 

Vous essayiez d'envelopper une fonction au lieu d'un élément, qui est wh à peut être à l'origine du comportement inattendu.

Answer 3

Insérer le texte suivant avant que le code jquery:

$j = jQuery.noConflict(true); 

Maintenant, vous pouvez utiliser j $ au lieu de $ pour toute substance jquery que vous voulez faire. i.e. .:

$j("body") 

Answer 4

Je préfère utiliser une auto exécution fonction anonyme pour donner votre code jQuery son propre champ où vous pouvez utiliser $ comme vous le feriez normalement si vous ne l'avez pas à vous soucier de la compatibilité.

Cela va avoir l'air bizarre si vous ne l'avez pas vu auparavant. Fondamentalement, ce que j'ai fait était de définir une fonction qui prend un paramètre (le $) et ensuite exécuter cette fonction avec jQuery comme paramètre.

<script> 
jQuery.noConflict(); 

(function($) { 
    //use '$' as you normally would 
    $(document).ready(function() { 
     //code here that depends on the document being fully loaded 
    }); 

})(jQuery); 

</script>