Quando devo usar a função document.ready do jQuery?

107

Disseram-me para usar document.ready quando comecei a usar Javascript / jQuery, mas nunca realmente aprendi por quê.

Alguém poderia fornecer algumas orientações básicas sobre quando faz sentido envolver o código javascript / jquery dentro do jQuery document.ready?

Alguns tópicos nos quais estou interessado:

.on()Método jQuery : Eu uso .on()bastante o método para AJAX (normalmente em elementos DOM criados dinamicamente). Os .on()manipuladores de clique devem estar sempre dentro document.ready ?
Desempenho: é mais eficiente manter vários objetos javascript / jQuery dentro ou fora de document.ready (também, a diferença de desempenho é significativa?)?
Escopo do objeto: páginas carregadas com AJAX não podem acessar objetos que estavam dentro do documento da página anterior. Pronto, correto? Eles só podem acessar objetos que estavam fora do document.ready (ou seja, objetos verdadeiramente "globais")?

Atualização: para seguir uma prática recomendada, todo o meu javascript (a biblioteca jQuery e o código do meu aplicativo) está na parte inferior da minha página HTML e estou usando o deferatributo nos scripts contendo jQuery em minhas páginas carregadas com AJAX para que eu pode acessar a biblioteca jQuery nessas páginas.

— Tim Peterson
fonte

2

Porque se o DOM não estiver pronto, você pode obter resultados inesperados, só isso.

— Robert Harvey,

1

2.- Bem, eu uso fora apenas para depurar e posso chamar algumas var / função pelo console,

— jd_7

@RobertHarvey que tipo de resultados "inesperados"? você pode dar um exemplo?

— tim Peterson

3

Você tenta modificar um elemento ou atributo que ainda não chegou ao DOM.

— Robert Harvey,

143

Em palavras simples,

$(document).readyé um evento que dispara quando documentestá pronto.

Suponha que você tenha colocado seu código jQuery na headseção e tentando acessar um domelemento (uma âncora, um img etc), você não será capaz de acessá-lo porque htmlé interpretado de cima para baixo e seus elementos html não estão presentes quando seu código jQuery corre.

Para superar esse problema, colocamos cada código jQuery / javascript (que usa DOM) dentro da $(document).readyfunção que é chamada quando todos os domelementos podem ser acessados.

E esta é a razão, quando você coloca seu código jQuery na parte inferior (depois de todos os elementos dom, logo antes </body>), não há necessidade de$(document).ready

Não há necessidade de colocar o onmétodo dentro $(document).readyapenas quando você usa o onmétodo em, documentpelo mesmo motivo que expliquei acima.

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

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

EDITAR

Dos comentários,

$(document).readynão espera por imagens ou scripts. Essa é a grande diferença entre $(document).readye$(document).load
Apenas o código que acessa o DOM deve estar no manipulador pronto. Se for um plugin, não deveria estar no evento pronto.

— Jashwant
fonte

@Dipaks Sim, por que não? Estamos muito acostumados a usar $(document).ready. Veja isto

— Jashwant

Contanto que você carregue o jQuery no heade você está scripts após os elementos sendo manipulados, document.readynão é necessário. As imagens são um caso especial, porém ...

— elclanrs

@elclanrs Veja minha pergunta atualizada. Estou carregando o jQuery na parte inferior da minha página HTML com o meu código específico do aplicativo logo depois disso.

— tim Peterson

@Jashwant e as diferenças de desempenho de dom.ready vs. not? São relevantes?

— tim Peterson

1

Não colocamos todo o jQuerycódigo no manipulador pronto. Apenas o código que acessa o DOM. Se é um plugin, não deveria estar no ready evento

— Juan Mendes

7

Respostas:

Método .on () do jQuery: Eu uso bastante o método .on () para AJAX (criando elementos DOM dinamicamente). Os manipuladores de clique .on () devem estar sempre dentro de document.ready?

Não, nem sempre. Se você carregar seu JS no cabeçalho do documento, será necessário. Se você estiver criando os elementos após o carregamento da página via AJAX, você precisará. Você não precisará se o script estiver abaixo do elemento html, você também está adicionando um manipulador.

Desempenho: é mais eficiente manter vários objetos javascript / jQuery dentro ou fora de document.ready (também, a diferença de desempenho é significativa?)?

Depende. Levará a mesma quantidade de tempo para anexar os manipuladores, só depende se você deseja que isso aconteça imediatamente quando a página estiver carregando ou se deseja esperar até que todo o documento seja carregado. Portanto, vai depender de outras coisas que você está fazendo na página.

Escopo do objeto: páginas carregadas com AJAX não podem acessar objetos que estavam dentro do documento da página anterior. Pronto, correto? Eles só podem acessar objetos que estavam fora de document.ready (ou seja, objetos verdadeiramente "globais")?

É essencialmente sua própria função, portanto, só pode acessar vars declarados em um escopo global (fora / acima de todas as funções) ou com window.myvarname = '';

— Justin
fonte

6

Antes de usar o jQuery com segurança, você precisa garantir que a página esteja em um estado em que esteja pronta para ser manipulada. Com jQuery, fazemos isso colocando nosso código em uma função e, em seguida, passando essa função para $(document).ready(). A função que passamos pode ser apenas uma função anônima .

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

Isso executará a função que passamos para .ready () assim que o documento estiver pronto. O que está acontecendo aqui? Estamos usando $ (document) para criar um objeto jQuery a partir do documento de nossa página e, em seguida, chamando a função .ready () nesse objeto, passando a função que queremos executar.

Já que isso é algo que você fará muito, há um método abreviado para isso, se preferir - a função $ () tem uma função dupla como um apelido para $ (document) .ready () se você passar uma função para ela:

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

Esta é uma boa leitura: Jquery Fundamentals

— Tom Sarduy
fonte

3

Não deve ser confundido com o (function($){ })(jQuery);que envolve seu código para que $ seja jQuery dentro desse encerramento

— John Magnolia

3

.ready () - especifica uma função a ser executada quando o DOM está totalmente carregado.

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

Aqui está uma lista de todos os métodos jQuery

Leia sobre a introdução de $ (document) .ready ()

— Dipak
fonte

3

Para ser realista, document.readynão é necessário para nada além de manipular o DOM com precisão e nem sempre é necessário ou é a melhor opção. O que quero dizer é que quando você desenvolve um grande plugin jQuery, por exemplo, você dificilmente o usa em todo o código porque está tentando mantê-lo DRY, então você abstrai o máximo possível em métodos que manipulam o DOM, mas devem ser chamados mais tarde. Quando todo o seu código está totalmente integrado, o único método exposto document.readyé geralmente initonde toda a mágica do DOM acontece. espero que isso responda sua pergunta.

— elclanrs
fonte

0

Você deve vincular todas as ações em document.ready, porque você deve esperar até que o documento esteja totalmente carregado.

Porém, você deve criar funções para todas as ações e chamá-las de dentro do document.ready. Ao criar funções (seus objetos globais), chame-os sempre que quiser. Assim, uma vez que seus novos dados sejam carregados e novos elementos criados, chame essas funções novamente.

Essas funções são aquelas em que você vinculou os eventos e itens de ação.

$(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...);
}

— Pulkit Mittal
fonte

0

Anexei um link para um div e queria fazer algumas tarefas no clique. Eu adicionei o código abaixo do elemento anexado no DOM, mas não funcionou. Aqui está o 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>

Não funcionou. Então coloquei o código jQuery dentro de $ (document) .ready e funcionou perfeitamente. Aqui está.

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

— Safeer Ahmed
fonte

-2

O evento pronto ocorre quando o DOM (modelo de objeto de documento) é carregado.

Como esse evento ocorre depois que o documento está pronto, é um bom lugar para todos os outros eventos e funções jQuery. Como no exemplo acima.

O método ready () especifica o que acontece quando ocorre um evento pronto.

Dica: O método ready () não deve ser usado junto com.

— Shrikant Shiledar
fonte