Cuando puedo mantener mi javascript/jquery externo, mi código no funciona. pero cuando me combinarlos en mi archivo html que todo está bien.

cualquier sugerencia en cuanto a por qué esto es así?

aquí está el código:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
       <script type ="text/javascript" src="jquery.js"></script>  
       <script type ="text/javascript" src="program.js"></script>
</head>
<body>
    <div id="clickme">
    Click here
    </div>

    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>

</body> 
</html>

con javascript externo

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    //Animation complete.
  });
});
$("p").click(function () {
     $(this).slideUp();
   });

FRENTE a

<!DOCTYPE html>
<html>
<head>
    <script type ="text/javascript" src="jquery.js"></script>  
</head>
<body>

    <div id="clickme">
        Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>  
    <p>Yet one more Paragraph</p>


    <script>
        $('#clickme').click(function() {
      $('#book').fadeOut('slow', function() {
     //Animation complete.
     });
     });

    $("p").click(function () {
    $(this).slideUp();
     });


    </script>

</body>
</html>
  • Usted está cambiando drásticamente la ubicación en el código de la primera versión en comparación con el segundo. En el segundo, el código antes de la etiqueta body de cierre después de que los elementos a los que afecta. En la primera, el código es en el <head> que es antes de los elementos a los que afecta. Mueva las etiquetas de secuencia de comandos para la ubicación de la segunda versión, o utilizar una de las respuestas.
  • Esta pregunta habría tenido sentido si se comparan externos & interna, pero en la misma ubicación. -1
InformationsquelleAutor anc1revv | 2012-06-05

4 Comentarios

  1. 13

    Supongo que ejecutar el evento click antes de que el DOM termina de cargar. Ajustar el código dentro de la dom listas evento y se debe trabajar, Asumiendo que su ruta de acceso al archivo javascript externo es correcta.

    $(function(){
    
       $('#clickme').click(function() {
         $('#book').fadeOut('slow', function() {
           //Animation complete.
         });
       });
       $("p").click(function () {
          $(this).slideUp();
       });
    });

    Siempre el uso de firebug (consola) para ver lo que está mal con el script, si tiene errores de secuencia de comandos.

    • ¿por qué no escribir «.listo» con la función? he leído la documentación, pero es todavía confuso
    • El $(function) versión es sólo más corto, yo prefiero la más $(document).ready(function) versión porque es más fácil de leer y entender para alguien que no estén familiarizados con jQuery.
    • Como dijo Kevin $(function(){… es la forma corta de $(document).listo(controlador)… Que está muy bien escrito en el método de la documentación.
    • y Shyju. Gracias!
  2. 6

    Que javascript se ejecuta antes de que existen elementos en la página. Usted puede evitar esto mediante el uso de $(document).ready(function(){...}); o mover sus archivos javascript externos a la parte inferior.

  3. 4

    Envolver el código js en archivo externo en

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

    Ahora se están incluyendo archivo js externo en la cabecera y es ejecutado. En este momento no hay elementos para $('#clickme') y $("p") son un conjunto vacío. En el segundo ejemplo de ejecutar este código después de renderizado de html con que elementos.

  4. 2

    La razón de que hay una diferencia, es que en el archivo externo de su código se ejecuta antes de que el navegador ha analizado el DOM lo está intentando a través de programación de acceso a los elementos de la página que el navegador no está todavía conscientes. Esto es exactamente lo que la mayoría de la gente ya se ha dicho, pero permítanme elaborar un poco más…

    Mientras que un montón de gente ha mencionado el uso de jQuery, documento preparado controlador, me gustaría señalar que una solución viable es simplemente mover sus etiquetas de secuencia de comandos en la parte inferior de la página.

    Esto no sólo resolver su problema en sí mismo, sino que también va a mejorar los tiempos de carga de página, porque de cómo los navegadores de tratamiento de secuencias de comandos. Cuando el navegador encuentra una secuencia de comandos que se detenga todo lo demás que está haciendo (conocido como un «bloqueo» de la operación), y analiza y ejecuta la secuencia de comandos. Esto hace que la página sólo aparecen en puesto desde la perspectiva del usuario, es decir, una mala experiencia de usuario. Por lo tanto, debido a que las secuencias de comandos se analiza y se ejecuta sólo a medida que se encuentren, por el movimiento de los scripts en la parte inferior que permiten el navegador para procesar por completo la página, de manera que el JavaScript no de bloque de representación.

    Aunque en lugar de sólo cambiar los scripts a la parte inferior de la página, también me gustaría seguir lo que los demás recomienda y envuelva todo el código en el documento listo controlador sólo para estar más seguro de que el código siempre se ejecutará en el momento correcto.

    También, en el debate de en línea o externo, scripts externos generalmente son preferibles, ya que son más fáciles de mantener y que el navegador puede almacenar en caché independientemente de la página (que proporciona la correcta encabezados HTTP están presentes).

    A resumir aquí un ejemplo de código:

    <html>
    <head></head>
    <body>
    <!-- all your markup here -->
    
    <!-- script at bottom, markup already rendered by this point -->
    <script type="text/javascript" src="jquery.js"></script>
    
    <!-- inline or external, still wrap in document ready handler -->
    <!-- though external is better because the browser can cache it independently of the page -->
    <script type="text/javascript">
        //wrap in document ready to be extra safe
        $(function() { /*code here*/ });
    </script>
    
    </html>

Dejar respuesta

Please enter your comment!
Please enter your name here