2010-10-08 3 views
4

Je suis très novice en jQuery et javascript en général, alors peut-être y at-il quelque chose qui me manque.jQuery fonctionne à partir de la console Firebug, mais pas au chargement de la page

J'ai une page html avec un lien vers la dernière version de jQuery dans la tête ...

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

Mais tout code jQuery que je tente d'exécuter n'importe où ... dans la tête ou séparée fichier .js, ne sera pas exécuté lorsque je charge la page. Cependant le javascript normal fait. Firebug reconnaît que la bibliothèque jQuery est chargée lorsque je clique sur Script ou Dom ... la console acceptera et exécutera mon code jQuery sans aucun problème.

Voici le html ... oui c'est html5 et ça fonctionne très bien tous les navigateurs sauf Opera et IE.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Produkshunator</title> 

     <link rel="stylesheet" type="text/css" href="styles/layout.css" /> 
     <link rel="stylesheet" type="text/css" href="styles/skins.css" /> 
     <link rel="stylesheet" type="text/css" href="styles/formlayout.css" /> 
     <link rel="stylesheet" type="text/css" href="styles/index.css" /> 

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

    </head> 

    <body class="vbox flex"> 

     <!-- header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 

     <header class="hbox"> 
      <div class="hbox flex" style="padding-top: 5px;"> 
       <img src="icons/Produkshunator.png" style="height:60px;width:490px;"/> 
      </div> 
      <div id="login_status" style="width:150px;"></div> 
     </header> 

     <!-- body ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 

     <div class="flex hbox"> 



<!-- Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->    

       <section class="vbox right" style="width:400px; padding:0; overflow: visible;"> 

    <!-- Login Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> 

       <form class="flex sleek" 
         name="login" 
         id="login"> 

        <h2 class="r">Login</h2> 

        <div> 
         <label>Email:</label> 
         <input type="email" name="email"/> 
        </div> 
        <div> 
         <label>Password:</label> 
         <input type="password" name="password"/> 
        </div> 
        <div>      
         <input type="button" value="Submit" class="form_butt" /> 
        </div> 
        <p><i id="log_error" class="error"></i></p>  
       </form> 


    <!-- Registration Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 

       <form class="sleek flex" 
         name="register" 
         id="register"> 
        <h2 class="r">Register</h2> 

         <div> 
         <label>First Name:</label> 
         <input type="text" required="flag" name="firstname"/> 
         </div> 
         <div> 
         <label>Last Name:</label> 
         <input type="text" required="flag" name="lastname"/> 
         </div> 
         <div> 
         <label>Email:</label> 
         <input type="email" required="flag" name="email"/> 
         </div> 
         <div> 
         <label>Password:</label> 
         <input type="password" required="flag" name="password"/> 
         </div> 
         <div> 
         <label>Retype Password:</label> 
         <input type="password" required="flag" name="password2"/> 
         </div> 
         <div> 
          <input type="button" value="Submit" class="form_butt" /> 
         </div>   
         <p id="reg_error" class="error"></p> 
       </form> 

      </section> 

     </div> 

    </body> 
</html> 

Y a-t-il quelque chose que je dois savoir qui n'est pas dans les tutoriels?

+1

Pouvez-vous soit lien vers la page HTML ou poster une? En outre, vous êtes probablement mieux d'utiliser la version API Google de jQuery: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js – mway

+0

Merci mway ... juste changé le Lien jQuery et affiché le code HTML. – cybermotron

+0

et que contient 'index4.js'? – Reigel

Répondre

3

Essayez de mettre votre code à l'intérieur

$(document).ready(function(){  
    // Your code goes here  
}); 
+0

+1 classiques .... – Reigel

+0

Merci beaucoup !! Cela fonctionne maintenant un régal! – cybermotron

+1

@ cybermotron, veuillez accepter la réponse de Jakub si elle est correcte. –

Questions connexes