web-dev-qa-db-fra.com

JQuery - $ n'est pas défini

J'ai un simple événement jQuery click

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>

et une référence jquery définie dans le site.master

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

J'ai vérifié que le script est correctement résolu, je peux voir le balisage et voir le script directement dans firebug, donc je dois être trouvé. Cependant, je reçois toujours:

$ n'est pas défini

et aucun des travaux ne fonctionne. J'ai aussi essayé les différentes variantes de ceci comme $ (document) .ready et jQuery etc.

C'est une application MVC 2 sur .net 3.5, je suis sûr que je suis vraiment dense, partout sur Google dit de vérifier que le fichier est référencé correctement, ce que j'ai vérifié et vérifié à nouveau, merci de le conseiller! : /

420
Paul Creasey

Cette erreur ne peut être causée que par l'une des trois choses suivantes:

  1. Votre fichier JavaScript n'est pas chargé correctement dans votre page
  2. Vous avez une version ratée de jQuery. Cela peut arriver parce que quelqu'un a édité le fichier core ou qu'un plugin a écrasé la variable $.
  3. JavaScript est en cours d'exécution avant que la page ne soit entièrement chargée et, par conséquent, avant que jQuery ne soit complètement chargé.

Vous devriez vérifier le panneau Firebugnet pour voir si le fichier est effectivement chargé correctement. Sinon, il sera surligné en rouge et indiquera "404" à côté. Si le fichier se charge correctement, cela signifie que le problème est le numéro 2.

Assurez-vous que tout le code javascript jQuery est exécuté dans un bloc de code tel que:

$(document).ready(function () {
  //your code here
});

Cela garantira que votre code est chargé après jQuery a été initialisé.

Une dernière chose à vérifier est de vous assurer que vous ne chargez aucun plugin avant vous chargez jQuery. Les plugins étendent l'objet "$", donc si vous chargez un plugin avant de charger jQuery Core, vous obtiendrez l'erreur que vous avez décrite.

Remarque: Si vous chargez du code qui ne nécessite pas l'exécution de jQuery, il n'a pas besoin d'être placé dans le gestionnaire jQuery ready. Ce code peut être séparé avec document.readyState .

489
Mike Trpcic

Il se peut que votre balise de script soit appelée avant le script jquery.

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Cela a pour résultat que $ n'est pas défini

Placez le fichier jquery.js avant votre balise script et cela fonctionnera;) ainsi:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js"></script>
182
Hanky Panky

Tout d’abord, vous devez vous assurer que le script jQuery est chargé. Cela pourrait être à partir d'un CDN ou local sur votre site Web. Si vous ne le chargez pas avant d'essayer d'utiliser jQuery, cela vous indiquera que jQuery n'est pas défini. 

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

Cela pourrait être dans le HEAD ou dans le pied de page de la page, assurez-vous juste de le charger avant d'essayer d'appeler d'autres éléments jQuery. 

Ensuite, vous devez utiliser l'une des deux solutions ci-dessous

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery); 

ou

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

s'il vous plaît soyez conscient que plusieurs fois $ (document) .ready (function () {// code here}); ne fonctionnera pas.

55
Andrew Killen

Si l'appel du plug-in jQuery est à côté du </body> et que votre script est chargé avant cela, vous devez faire exécuter votre code après l'événement window.onload, comme ceci:

window.onload = function() {
  //YOUR JQUERY CODE
}

`

alors, votre code ne fonctionnera qu'après le chargement de la fenêtre, une fois que tous les actifs auront été chargés. À ce stade, le jQuery ($) sera défini.

Si vous utilisez ça:

$(document).ready(function () {
  //YOUR JQUERY CODE
});

`

le $ n'est pas encore défini, car il est appelé avant le chargement de jQuery et votre script échouera sur la première ligne de la console.

35
dandapereira

Je viens de faire la même chose et j'ai trouvé que j'avais beaucoup de 

type="text/javacsript"

Donc, ils chargeaient, mais aucun indice supplémentaire quant à pourquoi cela ne fonctionnait pas. Inutile de dire que l'orthographe correcte l'a corrigée.

26
George R

Utilisez une section scripts dans la vue et la disposition principale.

Placez tous vos scripts définis dans votre vue dans une section Scripts de la vue. De cette manière, vous pouvez charger la mise en page principale après que tous les autres scripts ont été chargés. Ceci est la configuration par défaut lors du démarrage d'un nouveau projet Web MVC5. Pas sûr des versions précédentes.

Vues/Foo/MyView.cshtml:

// The rest of your view code above here.

@section Scripts 
{ 
    // Either render the bundle defined with same name in BundleConfig.cs...
    @Scripts.Render("~/bundles/myCustomBundle")

    // ...or hard code the HTML.
    <script src="URL-TO-CUSTOM-JS-FILE"></script>

    <script type="text/javascript">
      $(document).ready(function () {

        // Do your custom javascript for this view here. Will be run after 
        // loading all the other scripts.            
      });
    </script>
}

Views/Shared/_Layout.cshtml

<html>
<body>
    <!-- ... Rest of your layout file here ... -->

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Notez que la section scripts est restituée pour la dernière fois dans le fichier de présentation maître.

18
angularsen

Comme indiqué ci-dessus, cela se produit en raison du conflit de $ variable.

J'ai résolu ce problème en réservant une variable secondaire pour jQuery sans conflit.

var $j = jQuery.noConflict();

et ensuite l'utiliser n'importe où

$j( "div" ).hide();

plus de détails peuvent être trouvés ici

8
Tough Guy

assurez-vous de bien charger jquery c'est pas jquery - c'est l'interface utilisateur!

  <script language="JavaScript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js">
  </script>

Ceci est une source de script correcte pour jQuery:

 <script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
8
Wolfgang Fahl

Utilisez-vous d'autres bibliothèques JavaScript? Si tel est le cas, vous devrez probablement utiliser jQuery en mode de compatibilité:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

7
tambler

Cela signifie que votre bibliothèque jQuery n'a pas encore été chargée.

Vous pouvez déplacer votre code après avoir extrait la bibliothèque jQuery.

ou vous pouvez utiliser quelque chose comme ça

window.onload = function(){
  // Your code here
};  
6
Nesar

J'ai reçu le même message d'erreur lorsque j'ai mal orthographié la référence jQuery. Au lieu de type="text/javascript", j'ai saisi "... javascirpt". ;)

4
alan

Il semble que jQuery ne se charge pas correctement. Quelle source/version utilisez-vous?

Sinon, il peut s'agir d'une collision d'espace de noms. Essayez donc d'utiliser jQuery explicitement au lieu d'utiliser $. Si cela fonctionne, vous voudrez peut-être utiliser noConflict pour vous assurer que l'autre code utilisant $ ne sera pas cassé.

4
Alexender Dumma

après quelques tests, j'ai trouvé une solution rapide, vous pouvez ajouter en haut de votre page d'index:

<script>
$=jQuery;
</script>

ça marche très bien :)

3
Mimouni

Cette erreur signifie que jQuery n'a pas encore été chargé sur la page. Utiliser $(document).ready(...) ou l'une de ses variantes n'aura aucun effet, car $ est la fonction jQuery.

Utiliser window.onload devrait fonctionner ici. Notez qu’une seule fonction peut être assignée à window.onload. Pour éviter de perdre la logique de charge initiale, vous pouvez décorer la fonction d'origine comme suit:

originalOnload = window.onload;
window.onload = function() {
  if (originalOnload) {
    originalOnload();
  }
  // YOUR JQUERY
};

Ceci exécutera la fonction assignée à l'origine à window.onload, puis exécutera // YOUR JQUERY.

Voir https://en.wikipedia.org/wiki/Decorator_pattern pour plus de détails sur le motif de décorateur.

3
Kyle McVay

Dans la solution, il est mentionné - "Une dernière chose à vérifier est de vous assurer que vous ne chargez aucun plugin avant de charger jQuery. Les plugins étendent l'objet" $ ". , alors vous obtiendrez l'erreur que vous avez décrite. "

Pour éviter cela - 

De nombreuses bibliothèques JavaScript utilisent $ comme nom de fonction ou de variable, tout comme jQuery. Dans le cas de jQuery, $ n'est qu'un alias pour jQuery, de sorte que toutes les fonctionnalités sont disponibles sans utiliser $. Si nous avons besoin d'utiliser une autre bibliothèque JavaScript à côté de jQuery, nous pouvons rendre le contrôle de $ à l'autre bibliothèque en appelant $ .noConflict ():

2
user1284907

J'utilise Url.Content et n'ai jamais de problème.

<script src="<%= Url.Content ("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript"></script>
2
mdm20

Il suffit de placer l’url jquery au-dessus de votre code jquery

comme ça--

<script src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $('#post').click(function() {
            alert("test"); 
        });
    });
</script>
1
vikrantx

J'ai eu le même problème et c'est parce que ma référence à jQuery.js n'était pas dans la balise. Une fois que j'ai changé cela, tout a commencé à fonctionner.

Anthony

1
Anthony

J'ai eu ce problème une fois sans raison apparente. Cela se passait localement alors que je courais sur le serveur de développement aspnet. Cela fonctionnait et j'ai tout retourné dans un état où il fonctionnait auparavant et qui ne fonctionnait toujours pas. J'ai regardé dans le débogueur de chrome et le jquery-1.7.1.min.js avait chargé sans aucun problème. C'était très déroutant. Je ne sais toujours pas quel était le problème, mais j'ai fermé le navigateur, fermé le serveur de développement, puis réessayé.

1
cedd

il semble que si vous localisez vos fichiers jquery.js dans le même dossier ou dans certains sous-dossiers contenant votre fichier HTML, le problème Firebug est résolu. Par exemple, si votre html est sous C:/folder1 /, alors vos fichiers js doivent se trouver quelque part sous C:/folder1/(ou C:/folder1/folder2 etc.) et être adressés en conséquence dans le doc html. J'espère que cela t'aides.

0
sc123

J'ai eu un problème très similaire. Dans mon application C # MVC, JQuery n'était pas reconnu. Je devais déplacer le @ Scripts.Render ("~/bundles/jquery") du bas de mon fichier _Layout.cshtml vers le haut de la section. Assurez-vous également que Jquery est un package Nuget si vous utilisez Visual Studio!

<head>
    @Scripts.Render("~/bundles/jquery")
</head>
0
BHOW

J'avais ce même problème et je ne pouvais pas comprendre ce qui le causait. J'ai récemment converti mes fichiers HTML du japonais en UTF-8, mais je n'ai rien fait avec les fichiers de script. Jquery-1.10.2.min.js a en quelque sorte été corrompu au cours de ce processus (je ne sais toujours pas comment). Remplacer jquery-1.10.2.min.js par l’original le corrigeait.

0
Gavin

si la balise script a l'attribut defer, cela indique l'erreur  

Uncaught ReferenceError: $ n'est pas défini

et doit supprimer l'attribut defer de la balise script 

0
AbdulAhmad Matin
  1. Vérifiez que le chemin exact de votre fichier jquery est inclus.

    <script src="assets/plugins/jquery/jquery.min.js"></script> 

Si vous ajoutez ceci au bas de votre page, veuillez appeler la fonction JS située sous cette déclaration.

  1. Vérifier à l'aide de ce code test

    <script type="text/javascript">
    /***
     * Created by dadenew
     * Submit email subscription using ajax
     * Send email address
     * Send controller
     * Recive response
     */
    $(document).ready(function() { //you can replace $ with Jquery
    
      alert( 'jquery working~!' );
    });
    

Paix!

0
danielad

Dans mon cas, je pointais sur JQuery hébergé par Google. Il était correctement inclus, mais j'étais sur une page HTTPS et l'appelais via HTTP. Une fois que j'ai résolu le problème (ou autorisé le contenu non sécurisé), tout s'est déclenché.

0
Anthony

Il existe un moyen de le charger automatiquement en javascript avant que le reste du code ne s'exécute.

Allez dans Views\Shared _Layout.html et ajoutez ce qui suit 

<head>
  <*@ Omitted code*@>
  <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
0
Pat

Lorsque vous utilisez jQuery dans asp.net, si vous utilisez une page maître et que vous y chargez le fichier source jquery, assurez-vous que l'en-tête contentplaceholder figure après toutes les références de script jquery. 

J'ai eu un problème où toutes les pages qui utilisaient cette page maître retournaient "$ n'est pas défini" simplement parce que l'ordre incorrect faisait exécuter le code côté client avant la création de l'objet jQuery. Alors assurez-vous d'avoir:

<head runat="server">
    <script type="text/javascript" src="Scripts/jquery-VERSION#.js"></script>
    <asp:ContentPlaceHolder id="Header" runat="server"></asp:ContentPlaceHolder>
</head>

Ainsi, le code s'exécutera dans l'ordre et vous pourrez exécuter le code jQuery sur les pages enfants.

0
Francis Musignac

Nous avons le même problème ... mais j'ai accidentellement vérifié les propriétés du dossier et défini quelque chose ...

Vous devez vérifier les propriétés de chaque dossier auquel vous accédez.

  1. dossier clic droit
  2. onglet 'autorisations'
  3. définir l'accès au dossier: PROPRIÉTAIRE: créer et supprimer des fichiers GROUPE: fichiers d'accès AUTRES: fichiers d'accès

J'espère que c'est la solution ......

0
RoyS_philippines

J'ai le même problème et aucun cas ne me résout le problème. La seule chose qui fonctionne pour moi, c'est sur le fichier Site.master, le suivant:

<script src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/bootstrap/js/bootstrap.min.js") %>" type="text/javascript"></script>

Avec src = "<% = ResolveUrl (" ") ...), la charge de jQuery dans les pages de contenu est correcte.

0
amelian