Quand dois-je utiliser la fonction document.ready de jQuery?

107

On m'a dit d'utiliser document.ready lorsque j'ai commencé à utiliser Javascript / jQuery mais je n'ai jamais vraiment su pourquoi.

Quelqu'un pourrait-il fournir des directives de base sur le moment où il est logique d'encapsuler du code javascript / jquery dans jQuery document.ready?

Quelques sujets qui m'intéressent:

.on()Méthode de jQuery : j'utilise .on()assez souvent la méthode pour AJAX (généralement sur les éléments DOM créés dynamiquement). Les .on()gestionnaires de clics doivent-ils toujours être à l' intérieur document.ready ?
Performances: est-il plus performant de conserver divers objets javascript / jQuery à l' intérieur ou à l' extérieur de document.ready (également, la différence de performances est-elle significative?)?
Portée de l'objet: les pages chargées en AJAX ne peuvent pas accéder aux objets qui se trouvaient à l' intérieur du document de la page précédente. Ils ne peuvent accéder qu'aux objets qui étaient en dehors de document.ready (c'est-à-dire des objets vraiment "globaux")?

Mise à jour: pour suivre une bonne pratique, tout mon javascript (la bibliothèque jQuery et le code de mon application) est en bas de ma page HTML et j'utilise l' deferattribut sur les scripts contenant jQuery sur mes pages chargées en AJAX afin que je peut accéder à la bibliothèque jQuery sur ces pages.

javascript jquery dom event-handling document-ready Tim Peterson
la source

2

Parce que si le DOM n'est pas prêt, vous pouvez obtenir des résultats inattendus, c'est tout.

Robert Harvey

1

2.- Eh bien, j'utilise l' extérieur juste pour déboguer et je peux appeler une

variable

@RobertHarvey quel genre de résultats "inattendus"? Pouvez vous donner un exemple?

tim peterson

3

Vous essayez de modifier un élément ou un attribut qui n'a pas encore atteint le DOM.

Robert Harvey

143

En termes simples,

$(document).readyest un événement qui se déclenche lorsqu'il documentest prêt.

Supposons que vous ayez placé votre code jQuery en headsection et que vous tentiez d'accéder à un domélément (une ancre, une img etc), vous ne pourrez pas y accéder car il htmlest interprété de haut en bas et vos éléments html ne sont pas présents lorsque votre code jQuery s'exécute.

Pour surmonter ce problème, nous plaçons chaque code jQuery / javascript (qui utilise DOM) dans une $(document).readyfonction qui est appelée lorsque tous les doméléments sont accessibles.

Et c'est la raison pour laquelle, lorsque vous placez votre code jQuery en bas (après tous les éléments dom, juste avant </body>), il n'est pas nécessaire de$(document).ready

Il n'est pas nécessaire de placer la onméthode à l'intérieur $(document).readyuniquement lorsque vous utilisez la onméthode pour documentla même raison que j'ai expliquée ci-dessus.

    //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 () {
    });

ÉDITER

À partir des commentaires,

$(document).readyn'attend pas les images ou les scripts. C'est la grande différence entre $(document).readyet$(document).load
Seul le code qui accède au DOM doit être dans le gestionnaire prêt. S'il s'agit d'un plugin, il ne devrait pas être dans l'événement ready.

Jashwant
la source

@Dipaks Oui, pourquoi pas? Nous sommes juste très habitués à utiliser $(document).ready. Voir ça

Jashwant

Tant que vous chargez jQuery dans headet que vous êtes des scripts après la manipulation des éléments, ce document.readyn'est pas nécessaire. Les images sont un cas particulier cependant ...

elclanrs

@elclanrs Voir ma question mise à jour. Je charge jQuery au bas de ma page HTML avec mon code spécifique à l'application juste après cela.

tim peterson

@Jashwant qu'en est-il des différences de performances entre dom.ready et non? Sont-ils pertinents?

tim peterson

1

Nous ne mettons pas tout le jQuerycode dans le gestionnaire prêt. Seul le code qui accède au DOM. Si c'est un plugin, ça ne devrait pas être dans l' ready événement

Juan Mendes

7

Réponses:

Méthode .on () de jQuery: J'utilise assez souvent la méthode .on () pour AJAX (création dynamique d'éléments DOM). Les gestionnaires de clic .on () doivent-ils toujours être à l'intérieur de document.ready?

Non, pas toujours. Si vous chargez votre JS dans la tête de document, vous en aurez besoin. Si vous créez les éléments après le chargement de la page via AJAX, vous devrez le faire. Vous n'en aurez pas besoin si le script est sous l'élément html que vous ajoutez également un gestionnaire.

Performances: est-il plus performant de conserver divers objets javascript / jQuery à l'intérieur ou à l'extérieur de document.ready (également, la différence de performances est-elle significative?)?

Ça dépend. Cela prendra le même temps pour attacher les gestionnaires, cela dépend simplement si vous voulez que cela se produise immédiatement pendant le chargement de la page ou si vous voulez qu'il attende que le document entier soit chargé. Cela dépendra donc des autres choses que vous faites sur la page.

Portée de l'objet: les pages chargées en AJAX ne peuvent pas accéder aux objets qui se trouvaient à l'intérieur du document de la page précédente. Ils ne peuvent accéder qu'aux objets qui étaient en dehors de document.ready (c'est-à-dire des objets vraiment "globaux")?

C'est essentiellement sa propre fonction donc il ne peut accéder qu'aux vars déclarés à une portée globale (en dehors / au-dessus de toutes les fonctions) ou avec window.myvarname = '';

Justin
la source

6

Avant de pouvoir utiliser jQuery en toute sécurité, vous devez vous assurer que la page est dans un état où elle est prête à être manipulée. Avec jQuery, nous accomplissons cela en plaçant notre code dans une fonction, puis en passant cette fonction à $(document).ready(). La fonction que nous transmettons peut simplement être une fonction anonyme .

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

Cela exécutera la fonction que nous transmettons à .ready () une fois que le document sera prêt. Que se passe t-il ici? Nous utilisons $ (document) pour créer un objet jQuery à partir du document de notre page, puis appelons la fonction .ready () sur cet objet, en lui passant la fonction que nous voulons exécuter.

Comme c'est quelque chose que vous vous surprendrez à faire beaucoup, il existe une méthode abrégée pour cela si vous préférez - la fonction $ () fait double emploi en tant qu'alias pour $ (document) .ready () si vous lui passez une fonction:

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

Ceci est une bonne lecture: Jquery Fundamentals

Tom Sarduy
la source

3

À ne pas confondre avec (function($){ })(jQuery);qui enveloppe votre code afin que $ soit jQuery à l'intérieur de cette fermeture

John Magnolia

3

.ready () - Spécifie une fonction à exécuter lorsque le DOM est complètement chargé.

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

Voici une liste de toutes les méthodes jQuery

Lire la suite Présentation de $ (document) .ready ()

Dipak
la source

3

Pour être réaliste, il document.readyn'est nécessaire que de manipuler le DOM avec précision et ce n'est pas toujours nécessaire ni la meilleure option. Ce que je veux dire, c'est que lorsque vous développez un gros plugin jQuery par exemple, vous l'utilisez à peine dans tout le code parce que vous essayez de le garder SEC, donc vous abstenez autant que possible dans des méthodes qui manipulent le DOM mais sont censées être invoquées plus tard. Lorsque tout votre code est étroitement intégré, la seule méthode exposée document.readyest généralement celle initoù se produit toute la magie DOM. J'espère que ça répond à ta question.

elclans
la source

0

Vous devez lier toutes les actions dans document.ready, car vous devez attendre que le document soit complètement chargé.

Mais, vous devez créer des fonctions pour toutes les actions et les appeler à partir du document.ready. Lorsque vous créez des fonctions (vos objets globaux), appelez-les quand vous le souhaitez. Ainsi, une fois vos nouvelles données chargées et les nouveaux éléments créés, appelez à nouveau ces fonctions.

Ces fonctions sont celles où vous avez lié les événements et les actions.

$(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
la source

0

J'ai ajouté un lien vers un div et je voulais effectuer certaines tâches sur le clic. J'ai ajouté le code sous l'élément ajouté dans le DOM mais cela n'a pas fonctionné. Voici le code:

<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>

Cela n'a pas fonctionné. Ensuite, j'ai placé le code jQuery dans $ (document) .ready et cela a parfaitement fonctionné. C'est ici.

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

Sûr Ahmed
la source

-2

L'événement prêt se produit lorsque le DOM (modèle d'objet de document) a été chargé.

Étant donné que cet événement se produit une fois que le document est prêt, c'est un bon endroit pour avoir tous les autres événements et fonctions jQuery. Comme dans l'exemple ci-dessus.

La méthode ready () spécifie ce qui se passe lorsqu'un événement ready se produit.

Astuce: la méthode ready () ne doit pas être utilisée avec.

Shrikant Shiledar
la source