javascript - funciona - jquery document ready function w3schools

¿Cuándo debería usar la función document.ready de jQuery?

Question

Me dijeron que usara document.ready cuando comencé a usar Javascript / jQuery, pero nunca aprendí por qué.

¿Podría alguien proporcionar algunas pautas básicas sobre cuándo tiene sentido ajustar el código de JavaScript / jquery dentro de jQuery''s document.ready ?

Algunos temas que me interesan:

1. .on() jQuery: utilizo el método .on() para AJAX bastante (típicamente en elementos DOM creados dinámicamente). ¿Deberían los manejadores de click .on() estar siempre dentro de document.ready ?
2. Rendimiento: ¿Es más eficaz mantener varios objetos javascript / jQuery dentro o fuera de document.ready (también, es significativa la diferencia de rendimiento?)?
3. Ámbito del objeto: las páginas cargadas con AJAX no pueden acceder a los objetos que se encontraban dentro del documento de la página anterior. ¿Preparado, correcto? Solo pueden acceder a objetos que estaban fuera de document.ready (es decir, objetos verdaderamente "globales")?

Actualización: para seguir una práctica recomendada, todos mis javascript (la biblioteca jQuery y el código de mi aplicación) están en la parte inferior de mi página HTML y estoy usando el atributo defer en los scripts que contienen jQuery en mis páginas cargadas con AJAX para que Puedo acceder a la biblioteca de jQuery en estas páginas.

Answer 1

Agregué un enlace a un div y quería hacer algunas tareas con el clic. Agregué el código debajo del elemento adjunto en el DOM pero no funcionó. Aquí está el código:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert(''Link Clicked'');``
  });
</script>

No funcionó. Luego coloqué el código jQuery dentro de $ (documento) .ready y funcionó perfectamente. Aquí está.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert(''Link Clicked'');
    });
});

Answer 2

Antes de que pueda usar jQuery con seguridad, debe asegurarse de que la página se encuentre en un estado en el que esté lista para ser manipulada. Con jQuery, logramos esto al poner nuestro código en una función y luego pasar esa función a $(document).ready() . La función que aprobamos puede ser simplemente una función anónima .

$(document).ready(function() {  
    console.log(''ready!'');  
});

Esto ejecutará la función que pasamos a .ready () una vez que el documento esté listo. ¿Que está pasando aqui? Estamos usando $ (documento) para crear un objeto jQuery a partir del documento de nuestra página, y luego llamar a la función .ready () en ese objeto, pasándole la función que queremos ejecutar.

Como esto es algo que te encontrarás haciendo mucho, hay un método de taquigrafía para esto, si lo prefieres: la función $ () funciona como un alias de $ (documento) .ready () si le pasas una función:

$(function() {  
    console.log(''ready!'');  
});  

Esta es una buena lectura: Jquery Fundamentals

Answer 3

Debe vincular todas las acciones en document.ready, porque debe esperar hasta que el documento esté completamente cargado.

Sin embargo, debe crear funciones para todas las acciones y llamarlas desde el documento. Listo. Cuando cree funciones (sus objetos globales), llámelos cuando lo desee. Entonces, una vez que se carguen sus datos nuevos y se creen nuevos elementos, llame de nuevo a esas funciones.

Estas funciones son aquellas en las que ha vinculado los eventos y los elementos de acción.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$(''el1'').on(''click'',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$(''el2'').on(''click'',function...);
}

Answer 4

El evento ready se produce cuando se ha cargado el DOM (modelo de objeto del documento).

Debido a que este evento ocurre después de que el documento esté listo, es un buen lugar para tener todos los demás eventos y funciones de jQuery. Como en el ejemplo de arriba.

El método ready () especifica qué sucede cuando ocurre un evento listo.

Consejo: El método ready () no se debe usar junto con.

Answer 5

En palabras simples,

$(document).ready es un evento que se activa cuando el document está listo.

Supongamos que ha colocado su código jQuery en la sección principal y tratando de acceder a un elemento dom (un anclaje, un img, etc.), no podrá acceder a él porque html se interpreta de arriba abajo y sus elementos html no están presentes cuando tu código jQuery se ejecuta.

Para solucionar este problema, colocamos cada código jQuery / javascript (que usa DOM) dentro de la función $(document).ready que se llama cuando se puede acceder a todos los elementos dom .

Y esta es la razón, cuando coloca su código jQuery en la parte inferior (después de todos los elementos dom, justo antes de </body> ), no hay necesidad de $(document).ready

No es necesario colocar on método dentro de $(document).ready solo cuando utiliza on método en el document debido a la misma razón que expliqué anteriormente.

    //No need to put inside $(document).ready
    $(document).on(''click'',''a'',function () {
    })

    // Need to put inside $(document).ready if placed inside <head></head>
    $(''.container'').on(''click'',''a'',function () {
    });

EDITAR

De los comentarios,

1. $(document).ready no espera imágenes o scripts. Esa es la gran diferencia entre $(document).ready y $(document).load

2. Solo el código que accede al DOM debe estar en el controlador listo. Si es un complemento, no debería estar en el evento listo.

Answer 6

Para ser realista, document.ready no es necesario para nada más que manipular el DOM con precisión y no siempre es necesario o la mejor opción. Lo que quiero decir es que cuando desarrollas un gran plugin de jQuery, por ejemplo, apenas lo utilizas en todo el código porque estás tratando de mantenerlo SECO, así que abstractas tanto como sea posible en métodos que manipulan el DOM pero están destinados a ser invocados mas tarde. Cuando todo tu código está estrechamente integrado, el único método expuesto en document.ready suele ser init donde ocurre toda la magia de DOM. Espero que esto responda a su pregunta.

Answer 7

Respuestas

Método .on () de jQuery: utilizo bastante el método .on () para AJAX (creando dinámicamente elementos DOM). ¿Deberían los manejadores de click .on () estar siempre dentro de document.ready?

No, no siempre Si carga su JS en el encabezado del documento, deberá hacerlo. Si está creando los elementos después de cargar la página a través de AJAX, deberá hacerlo. No será necesario si la secuencia de comandos está debajo del elemento html; también está agregando un controlador.

Rendimiento: ¿Es más eficaz mantener varios objetos javascript / jQuery dentro o fuera de document.ready (también, es significativa la diferencia de rendimiento?)?

Depende. Llevará la misma cantidad de tiempo adjuntar los controladores, solo depende si desea que suceda inmediatamente a medida que se carga la página o si desea que espere hasta que se cargue todo el documento. Entonces dependerá de qué otras cosas esté haciendo en la página.

Ámbito del objeto: las páginas cargadas con AJAX no pueden acceder a los objetos que se encontraban dentro del documento de la página anterior. ¿Preparado, correcto? Solo pueden acceder a objetos que estaban fuera de document.ready (es decir, objetos verdaderamente "globales")?

Básicamente es su propia función, por lo que solo puede acceder a vars declarados en un ámbito global (fuera / por encima de todas las funciones) o con window.myvarname = '''';

Answer 8

$(document).ready() : especifique una función para ejecutar cuando el DOM esté completamente cargado.

$(document).ready(function() {
  // Handler for .ready() called.
});

Aquí hay una lista de todos los métodos jQuery

Sigue leyendo Presentación de $ (document) .ready ()