Uncaught ReferenceError $ n'est pas défini

Je suis très nouveau pour JavaScript (juste commencé il y a quelques heures et en essayant d'obtenir un script de travail). Je suis passé par quelques tutoriels sur W3 et la 'bonjour le monde' code fonctionne quand je la coller directement dans mon code HTML, mais je vais avoir un problème avec un script (j'ai eu des problèmes avec les autres scripts, mais je ne suis pas sûr de ce que je fais mal).

J'ai cette code que je veux tester dans mon code HTML, j'ai copié le code HTML dans et il regarde la même chose, alors j'ai fait un fichier dans mon statique dossier appelé edit.js et copié le JavaScript (exactement comme indiqué). Il n'a pas de travail pas d'erreurs sur la page, mais quand je clique dessus rien ne se passe. J'ai essayé de coller un W3 'bonjour le monde' code et ça a fonctionné, mais ce script ne fonctionne pas.

J'ai essayé d'inspecter le code dans google Chrome, et c'est là que je vois l'erreur ci-dessus (sous l'onglet ressources). Je peux ouvrir le fichier js à l'aide de Chrome qui me fait penser que le fichier js est accessible et pointant correctement, mais je ne suis pas sûr de savoir comment le faire fonctionner. Je suis en utilisant Jinja2 comme mon moteur de template pour afficher le code HTML et dans ma tête j'ai:

<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>

et dans mon template principal (celui qui sera affiché sur toutes les pages) j'ai:

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

edit.js:

(même le mettre dans la balise script directement sur la page que je veux l'utiliser sur ne fonctionne pas)

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

HTML:

(il est intégré dans une page web)

    <head>
        <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
    </head>
... my html code..
        <div id="wrapper">
           <div id="container">
              <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
              <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
           </div>
        </div>

Je n'ai jamais réussi à exécuter un script JavaScript qui n'était pas sur W3 encore. J'obtiens le même problème avec d'autres scripts, même si je vois des gens en ligne en disant qu'ils fonctionnent très bien pour eux. Ai-je besoin de faire quelque chose de supplémentaire pour faire ce travail?

Mes deux questions sont:

Ce que je fais mal?
Parce que le Javascript semble tout simplement pas travailler quand il y a un problème, il est un moyen d'obtenir des erreurs ou des informations sur ce qui est fait mal?

J'ai lu Uncaught ReferenceError: $ n'est pas défini? et ont été à essayer de comprendre cela pour la dernière heure et ne peut pas voir mon problème.

Avez-vous vous assurer que jQuery est inclus avant edit.js?
oui..c'est dans mon premier modèle qui devrait être rendu à la première, mais juste au cas où il n'était pas que je ne l'ajouter au-dessus de ma edit.js appel(j'ai juste copié le googleapis lien de script au-dessus de la edit.js celui que j'ai posté ci-dessus). Toujours pas de chance 🙁
Pourriez-vous poster l'extrait de code HTML sur laquelle vous incluez le <script>'s sur votre question?
Je viens de poster la partie html..
Hmmm ok, semble bien pour moi :s. Par la manière, vous choisissez le language attribut de w3schools.com ? Il est obsolète. Et que d'un côté de la lecture: w3fools.com

OriginalL'auteur Lostsoul | 2012-07-10

3

D'abord, vous devez placer le script jQuery tag première.

Deuxièmement, vous avez besoin de faire une des choses suivantes:
1. Mettre votre code à l'intérieur de cette fonction:
```
$(document).ready(function(){/*CODE HERE*/});
```
2. Ou comme ceci:
```
$(function(){
    /*CODE HERE*/
});
```
Les DOM doit être prêt avant de pouvoir l'utiliser. Placer votre code dans des fonctions anonymes qui sont exécutés sur le prêt des événements du DOM est comment vous pouvez le faire.

Edit:
```
$(function(){
   $('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
   $('#savevalue').click(function(e){
     var showNew = $('#changevalue').val();
     $('#altervalue').hide();
     $('#storedvalue').show();
     $('#storedvalue span').text(showNew);
   });
});
```
Je suis désolé, je ne comprends pas tout. N'est-ce pas le edit.js enveloppé dans $(nomfonction)..?
Pas exactement, placer l'ensemble de votre code dans l'un des blocs ci-dessus. À l'aide du code ci-dessus les feux de fonction lors de jQuery est prêt. Vous essayez d'utiliser jQuery avant qu'il soit prêt. Je suis 100% sûr que c'est votre problème.
Voir mon montage....
wow merci..cela a fonctionné!!! J'ai enveloppé dans la balise de fonction et cela a fonctionné! Je ne pense pas que je n'avait jamais fait ça avant, je viens de copier et de coller le code principal directement dans un .fichier js. Je vais regarder mes autres fichiers et d'essayer de le faire. Merci beaucoup.
désolé, question stupide..j'apprends mieux quand je peux le comparer à des choses que je sais déjà..est le $(function(){ similaire à python def function: ? (Je pense que j'ai besoin de m'asseoir et lire un livre sur le javascript)

OriginalL'auteur marteljn
3
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
```
Balise de Script jQuery devrait venir avant que votre javascript personnalisé.

Suivre par edit.js
```
<script type="text/javascript" src="static/edit.js"></script>
```
Je viens de faire ça, l'erreur ne s'affiche pas dans google chrome, mais plus le lien(bouton modifier) ne fonctionne pas toujours.
Vous pouvez déposer le obsolète language attribut; le type="text/javascript" devrait être suffisant.

OriginalL'auteur root
2

Essayez de supprimer l'attribut de langue..parfois travailler pour moi. C'est aujourd'hui obsolète .. je pense

C'est quelque chose que beaucoup de gens vont courir si elles sont l'utilisation de l'auto terminé balises avec TextMate ou Sublime Text comme beaucoup de plugin et forfaits offerts encore ajouter l'attribut de langue pour les balises de script. Si votre JS balise ressemble à ceci: <script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8" async defer></script> j'ai trouvé retrait de cette solution résout le problème: <script... async defer></script>

OriginalL'auteur Anirudh Rayabharam
0

Vous devez inclure jquery avant de pouvoir l'utiliser.

OriginalL'auteur maxhud

Vous devez vous connecter pour publier un commentaire.