Uncaught ReferenceError: $ n'est pas défini?

Comment se fait-il que ce code lance un

Uncaught ReferenceError: $ n'est pas défini

quand c'était OK avant?

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

Les résultats dans les onglets ne se ferment plus.

jQuery est référencé dans l'en-tête:

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>

Vous devez d'abord mettre les références aux scripts jquery.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

Vous appelez la fonction ready avant que le JavaScript jQuery soit inclus. Référencez jQuery en premier.

C'est ce qui l'a résolu pour moi. À l'origine, je suis allé sur Google et j'ai copié et collé l'extrait de code suggéré pour jQuery sur leur page CDN:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

L'extrait n'inclut pas le HTTP:ou HTTPS:dans l' srcattribut mais mon navigateur, FireFox, en avait besoin alors je l'ai changé pour: modifier: cela a également fonctionné pour moi avec Google Chrome

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Ensuite, cela a fonctionné.

Si votre script personnalisé est chargé avant le chargement du plug-in jQuery dans le navigateur, ce type de problème peut se produire. Donc, gardez toujours votre propre code JavaScript ou jQuery après avoir appelé le plugin jQuery afin que la solution soit:

Ajoutez d'abord le lien vers le fichier jQuery hébergé chez GoogleApis ou un fichier jQuery local que vous téléchargerez sur http://jquery.com/download/ et hébergerez sur votre serveur:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

ou tout plugin pour jQuery. Ensuite, mettez votre lien ou code de fichier de script personnalisé:

<script src="js/custom.js" type="text/javascript"></script>

Dans mon cas, je mettais mon .jsfichier avant le lien du script jQuery, en mettant le .jsfichier après le lien du script jQuery a résolu mon problème.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>

D'accord, mon problème était différent - c'était modèle de sécurité des documents dans Chrome .

En regardant les réponses ici, il était évident que je ne chargeais pas mes fichiers jquery avant d'appeler les $(document).ready()fonctions etc. Cependant, ils étaient tous dans les bonnes positions.

Dans mon cas, c'était parce que j'accédais au contenu via une connexion HTTPS sécurisée, alors que la page essayait de télécharger les données hébergées CDN à partir de Google, etc. La solution était de les stocker localement puis de les inclure directement plutôt que depuis le CDN à chaque fois.

Edit : L'autre façon de le faire est de créer un lien vers tous les éléments hébergés par CDN sous https: // plutôt que http: // - alors le modèle ne se plaint pas.

Ajoutez la bibliothèque avant de démarrer le script. Vous pouvez ajouter l'un des CDN suivants pour le démarrer.

Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Microsoft

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Jquery

Si vous voulez une autre version cdn de Jquery, consultez ce lien .

Après ça:

<script type="text/javascript">
$(function(){
    //your stuff
});
or
$(document).ready(function(){
    //your stuff
});    
</script>

Wordpress:

<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
     //your stuff
});
</script>

Si c'est dans wordpress, il pourrait être nécessaire de changer

$(document).ready(function() {

à

jQuery(document).ready(function($){

ou ajouter

var $ = jQuery;

avant

$(document).ready(function() {

J'ai eu exactement le même problème et aucune de ces solutions ci-dessus n'a aidé. cependant, je viens de lier les .cssfichiers après les .jsfichiers et le problème a miraculeusement disparu. J'espère que cela t'aides.

Je voulais essayer de rendre mon script asynchrone . Ensuite, je l'ai oublié et quand j'ai mis en ligne le fichier [custom] .js n'a été chargé que 50% du temps avant jQuery.js.

J'ai donc changé

<script async src="js/script.js"></script>

à

<script src="js/script.js"></script>

Dans mon cas, j'avais cette referenceError car l'ordre des appels de script était incorrect. Résolu qu'en changeant l'ordre:

<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>

à

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>

J'ai eu le même problème, et j'ai résolu en mettant jQuery en haut de tous les codes javascript que j'ai dans mon code.

Quelque chose comme ça:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>

L'espoir peut aider quelqu'un à l'avenir.

Vous appelez la ready()fonction avant que le JavaScript jQuery soit inclus. Référencez jQuery en premier.

Si vous êtes dans ASP.NET MVC, vous pouvez spécifier quand votre code JS doit être rendu, en procédant comme suit:

1, dans votre page.cshtmlenveloppe votre <script>balise dans une section, et donnez-lui un nom, le nom commun à utiliser est «scripts»:

@section scripts {
    <script>
        // JS code...
    </script>
}

2, dans votre _Layout.cshtmlpage ajouter @RenderSection("Scripts", required: false), assurez-vous de le mettre après avoir référencé la source Jquery, cela rendra votre code JS plus tard que Jquery.

Si vous effectuez cette opération dans .Net et que le fichier de script est correctement référencé et que jQuery semble correct, assurez-vous que vos utilisateurs ont accès au fichier de script. Le projet sur lequel je travaillais (un collègue) avait son web.config refusant l'accès aux utilisateurs anonymes. La page sur laquelle je travaillais était accessible aux utilisateurs anonymes donc ils n'avaient pas accès au fichier de script. Supprimé ce qui suit dans le web.config et tout allait bien dans le monde:

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>

Dans mon cas, c'était une faute de frappe, j'ai oublié une barre oblique inverse et je ne faisais pas correctement référence à la source.

Avant src="/scripts/jquery.js"

Après    src="scripts/jquery.js"

Le fichier source jquery-1.2.6.min.jsn'est pas appelé la commande jQuery $()est exécutée plus tôt que <..src='jquery-1.2.6.min.js'>.

Veuillez exécuter <.. src="/js/jquery-1.2.6.min.js..">d'abord et assurez-vous que le chemin src est correct, puis exécutez la commande jquery

$(document).ready(function() 

Cela m'est arrivé avant.

La raison en est que je connecte Android à une vue Web avec un JS. Et j'ai envoyé un paramètre sans guillemets.

js.sayHello(hello);

et quand je l'ai changé en

js.sayHello('hello');

ça a marché.

Votre fichier JavaScript est manquant, cette erreur s'est donc produite. Ajoutez simplement le fichier JavaScript à l'intérieur de la <head>balise. Voir l'exemple:

<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />

ou ajoutez le code suivant dans la balise:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

L'erreur se produira également dans les deux scénarios suivants.

1. L'élément @section scripts est manquant dans le fichier HTML
2. Erreur lors de l'accès aux éléments DOM. Par exemple, l'accès à l'élément DOM est mentionné comme $ ("js-toggle") au lieu de $ (". Js-toggle"). En fait, la période manque

Donc, 3 choses à suivre - vérifiez que les scripts requis sont ajoutés, vérifiez s'il est ajouté dans l'ordre requis et les troisièmes erreurs de syntaxe dans votre script Java.

Ah! J'ai eu des citations mélangées dans mes balises qui ont provoqué la rupture de la référence jquery. Faire une inspection dans Chrome m'a permis de voir que le fichier n'était pas correctement lié.

Dans mon cas, j'ai oublié d'inclure ceci:

 <script src ="jquery-2.1.1.js"></script>

Plus tôt, j'incluais simplement jquery-mobile qui provoquait cette erreur.

J'ai modifié la balise de script pour pointer vers le bon contenu et changé l'ordre du script pour qu'il soit le bon dans l'éditeur. Mais j'ai totalement oublié de sauvegarder le changement.

J'ai eu un problème similaire et c'est parce qu'il me manquait une fermeture sur un lien de feuille de style.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>

J'ai un problème similaire, et vous savez quoi, c'est parce que le réseau est déconnecté lorsque je teste dans la vue Web de l'appareil Android et je ne le réalise pas, et le js local n'a aucun problème à charger car il n'a pas besoin de réseau. Cela semble ridicule, mais cela me fait perdre environ 1 heure pour le comprendre.

Vous n'avez pas référencé de bibliothèque jQuery.

Vous devrez inclure une ligne similaire à celle-ci dans votre code HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

J'ai eu un problème similaire. Mon serveur de test fonctionnait bien avec "http". Cependant, il a échoué dans la production qui avait SSL.

Ainsi en production, j'ai ajouté "HTPPS" au lieu de "HTTP" et en test, je l'ai gardé tel quel "HTTP".

Tester:

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

Production:

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

J'espère que cela aidera quelqu'un qui travaille sur wordpress.

Assez étrange, mon problème venait de PHP.

Un appel d'API REST échouait et interrompait le chargement des bibliothèques par la suite. Étant donné que l'échec provenait de l'appel REST, cela ne me donnait pas d'erreur de compilation php.

Conservez cette option également, si le chargement de jquery semble correct.

J'ai eu ce problème lorsque je naviguais sur Internet via mon point d'accès mobile. il comprenait également des images et a ajouté le script suivant au bas de la balise body

<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img");//-->
</script>

Lorsque je me suis connecté à une connexion wifi appropriée, tout semble fonctionner pour moi. J'espère que cela aidera quelqu'un.

Cela peut également se produire en cas de problème de réseau. Ce qui signifie que même si les "scripts jquery" sont en place et sont inclus avant l'utilisation, car les scripts jquery ne sont pas accessibles, au moment du chargement de la page, les définitions du "$" sont donc traitées comme msgstr "références non définies".

À DES FINS DE TEST / DÉBOGAGE :: Vous pouvez essayer d'accéder à l'URL "jquery-script" sur le navigateur. Si elle est accessible, votre page devrait se charger correctement, sinon elle affichera ladite erreur (ou d'autres erreurs pertinentes pour le script). Exemple - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js doit être accessible, sur le navigateur (ou les positions de contexte du navigateur).

J'ai eu un problème similaire, dans lequel j'ai pu charger la page html (à l'aide de scripts) dans mon navigateur hôte Windows, mais je n'ai pas pu charger dans vm-ubuntu. Résoudre le problème de réseau, a résolu le problème.

var $ = jQuery;
jQuery(document).ready(function($){