Comment puis-je mettre en œuvre JQuery.noConflict ()?

j'utilise javascript et jQuery sur la même page html. Pour une raison quelconque, la bibliothèque jQuery empêche mon code javascript natif de fonctionner correctement.

j'ai trouvé cette page: Pas de Conflit jQuery qui dit que vous pouvez utiliser jquery.noConflict pour libérer $ javascript. Cependant, je ne suis pas sûr de savoir comment le faire?

spécifiquement, Je ne suis pas sûr de la façon de mettre en œuvre correctement? Où va le code Jquery, où va le code JS? aller?

Mon code est ci-dessous:

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
24
demandé sur James Drinkard 2011-10-25 01:45:32
la source

13 ответов

jQuery.noConflict va réinitialiser le $ variable donc ce n'est plus un alias de jQuery. À part l'appeler une fois, il n'y a pas grand-chose d'autre à faire. Cependant, vous pouvez créer votre propre alias avec la valeur de retour, si vous voulez:

var jq = jQuery.noConflict();

et, en général, vous voulez le faire correctement après avoir inclus jQuery et tous les plugins:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>

vous pouvez aussi aller un peu plus loin et libérer jQuerynoConflict(true). Cependant, si vous prenez cette route, vous aurez certainement un alias que ni $ ni jQuery sera probablement ce que vous voulez:

var jq = jQuery.noConflict(true);

je pense que cette dernière option est principalement utilisée pour mixer les versions de jQuery, en particulier pour les plugins obsolètes quand vous voulez mettre à jour jQuery lui-même:

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
    var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>
34
répondu Jonathan Lonowski 2011-10-25 02:04:34
la source

Par défaut, jquery utilise la variable jQuery et le $ qui est utilisé pour votre commodité. Si vous voulez éviter les conflits, un bon moyen est d'encapsuler jQuery comme suit:

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)
12
répondu Derek Hunziker 2011-10-25 01:49:01
la source

Si je ne me trompe pas:

var jq = $.noConflict();

alors vous pouvez appeler la fonction jquery avec jq.(quoi.)

jq('#selector');
3
répondu aepheus 2011-10-25 01:48:58
la source

il vous permet de donner un nom différent à la variable jQuery, et de l'utiliser quand même:

<script type="text/javascript">
  $jq = $.noConflict();
  // Code that uses other library's $ can follow here.
  //use $jq for all calls to jQuery:
  $jq.ajax(...)
  $jq('selector')
</script>
2
répondu Neal 2011-10-25 01:47:56
la source

Il est généralement utilisé si vous utilisez une autre bibliothèque qui utilise $.

afin d'utiliser encore le $ symbole pour jQuery, j'utilise typiquement:

jQuery.noConflict()(function($){
  // jQuery code here
});
2
répondu Ivan 2011-10-25 01:50:27
la source

si vous regardez les exemples sur la page de l'api il y a ceci: Exemple: crée un alias différent au lieu de jQuery à utiliser dans le reste du script.

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

mettez le var j = jQuery.noConflict() après avoir apporté jquery et ensuite les scripts en conflit. Vous pouvez ensuite utiliser le j au lieu de $ pour tous vos jquery besoins et d'utiliser les $ pour l'autre script.

2
répondu scrappedcola 2011-10-25 01:51:06
la source

En plus de cela, en passant true$.noConflict( true); va également restaurer la variable globale précédente (s'il y en a) jQuery, de sorte que les plugins puissent être initialisés avec la version correcte de jQuery lorsque plusieurs versions sont utilisées.

1
répondu Andrew Kolesnikov 2011-10-25 01:49:37
la source

vous assignez simplement une variable personnalisée à JQuery à utiliser au lieu de sa valeur par défaut $. JQuery s'enroule alors dans une nouvelle fonction scope so $ n'a plus de conflit d'espace de noms.

<script type="text/javascript">
    $jQuery = $.noConflict();
    // Other library code here which uses '$'
    $jQuery(function(){ /* dom ready */ }
</script>
1
répondu AlienWebguy 2011-10-25 01:51:08
la source

la méthode noConflict () libère l'identifiant $ shortcut, de sorte que d'Autres scripts puissent l'utiliser pour la prochaine fois.

par Défaut de jquery$:

// Actin  with $
$(function(){
    $(".add").hide();
    $(".add2").show();
});

Ou personnalisé:

var j = jQuery.noConflict();
 // Action with j
j(function(){
    j(".edit").hide();
    j(".add2").show();
});
0
répondu Kabir Hossain 2015-08-10 14:00:30
la source
<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
    <script>
         var $i = jQuery.noConflict();
      // alert($i.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery-1.8.3.js"></script>
    <script>
        var $j = jQuery.noConflict();
      //alert($j.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery.colorbox.js"></script>

    <script src="Js/jquery-1.12.3.js"></script>
    <script>
        var $NJS = jQuery.noConflict();
    </script>

Vous pouvez le faire comme ceci:

<script>
   $i.alert('hi i am jquery-1.4.2.js alert function');
   $j.alert('hi i am jquery-1.8.3.js alert function');
 </script>
0
répondu pankaj prajapati 2016-06-27 11:12:39
la source
/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */

 var jq = $.noConflict();
    (function($){
      $('document').ready(function(){
        $('button').click(function(){
          alert($('.para').text());
        })
      })
    })(jq);


    live view example on codepen easy to understand.
    http://codepen.io/kaushik/pen/QGjeJQ
0
répondu Rajbir Sharma 2016-11-16 09:46:04
la source

Aujourd'hui j'ai ce problème parce que j'ai implémenté "Bootstrap menu" qui utilise une version jQuery avec "FancyBox image gallery". Bien sûr, un plugin fonctionne et l'autre n'est pas dû au conflit jQuery mais je l'ai surmonté comme suit:

tout d'abord j'ai ajouté le "menu bootstrap" Js dans le pied de page de script comme le menu est présenté sur toutes les pages du site web:

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

Et la bonne chose est à la fois le travail comme un charme :)

faire un essai :)

0
répondu Al3abMizo Games 2016-12-04 21:42:52
la source

j'ai corrigé cette erreur en ajoutant ce conflit code

<script type="text/javascript">
 jQuery.noConflict(); 
</script>

après mes fichiers jQuery et js et obtenir le fichier était l'erreur (trouvée par la console du navigateur) et remplacer tous les '$' par jQuery suivant ceci sur tous les fichiers d'erreur js dans mon site Magento. Il travaille pour moi bon. Plus de détails sur mon blog ici

0
répondu Niroshan 2017-06-24 11:20:06
la source

Autres questions sur