web-dev-qa-db-fra.com

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

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

Quelqu'un pourrait-il fournir des indications de base sur les cas où il est judicieux d’envelopper du code javascript/jquery dans le document.ready de jQuery? 

Quelques sujets qui m'intéressent:

  1. méthode .on() de jQuery: J'utilise pas mal la méthode .on() pour AJAX (généralement sur des éléments DOM créés de manière dynamique). Le .on() doit-il cliquer sur les gestionnaires always be inside document.ready?
  2. Performance: Est-il plus performant de conserver divers objets javascript/jQuery inside ou outside document.ready (également, la différence de performances est-elle significative?)?
  3. Portée de l'objet: les pages chargées en AJAX ne peuvent pas accéder aux objets qui étaient à l'intérieur du document de la page précédente.ready, correct? Ils peuvent uniquement accéder aux objets qui étaient en dehors de document.ready (c'est-à-dire des objets véritablement "globaux")? 

Mise à jour: Pour suivre une pratique recommandée, tout mon javascript (la bibliothèque jQuery et le code de mon application) se trouve dans le en bas de ma page HTML et j'utilise l'attribut defer sur les scripts contenant jQuery sur mes pages chargées en AJAX afin de pouvoir accéder à la bibliothèque jQuery sur ces pages.

javascriptjquerydomevent-handlingdocument-ready
102
tim peterson

En des mots simples,

$(document).ready est un événement qui se déclenche lorsque document est prêt.

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

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

Et c’est la raison pour laquelle vous placez votre code jQuery au bas de la liste (après tous les éléments dom, juste avant le </body>), vous n'avez pas besoin de $(document).ready

Il n'est pas nécessaire de placer la méthode on dans $(document).ready uniquement lorsque vous utilisez la méthode on sur document pour la même raison que celle que j'ai expliquée ci-dessus.

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

MODIFIER

À partir de commentaires,

  1. $(document).ready n'attend pas d'images ou de scripts. C’est la grande différence entre $(document).ready et $(document).load

  2. Seul le code qui accède au DOM doit être dans le gestionnaire ready. Si c'est un plugin, il ne devrait pas être dans l'événement ready.

138
Jashwant

Réponses:

la méthode .on () de jQuery: J'utilise pas mal la méthode .on () pour AJAX (création dynamique d’éléments DOM). Le .on () doit-il cliquer sur les gestionnaires toujours être à l'intérieur du document.ready?

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

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

Ça dépend. Il faudra autant de temps pour attacher les gestionnaires, cela dépend si vous voulez que cela se produise immédiatement lors du chargement de la page ou si vous souhaitez que le document entier soit chargé. Donc, cela dépendra 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 le document de la page précédente.ready, correct? Ils ne peuvent accéder qu'aux objets qui étaient en dehors de document.ready (c'est-à-dire de véritables objets "globaux")?

C'est essentiellement sa propre fonction, de sorte qu'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 = '';

7
Justin

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

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

Cela exécutera la fonction que nous passons à .ready () une fois le document 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 transmettant la fonction que nous voulons exécuter.

Comme c'est quelque chose que vous allez faire beaucoup, il existe une méthode abrégée si vous préférez - la fonction $ () sert de double alias pour $ (document) .ready () si vous lui transmettez une fonction:

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

C'est une bonne lecture: Jquery Fundamentals

5
Tom Sarduy

.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 sur Introduction de $ (document) .ready ()

3
Dipak

Pour être réaliste, document.ready n'est pas nécessaire pour autre chose 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 plugin jQuery volumineux, par exemple, vous ne l'utilisez presque pas dans le code, car vous essayez de le conserver au sec. plus tard. Lorsque tout votre code est étroitement intégré, la seule méthode exposée dans document.ready est généralement init où toute la magie du DOM se produit. J'espère que ça répond à ta question.

3
elclanrs

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

Toutefois, 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. Donc, une fois que vos nouvelles données sont chargées et que de nouveaux éléments sont 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...);
}
0
Pulkit Mittal

J'ai ajouté un lien à une div et je voulais effectuer certaines tâches au 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 fonctionné parfaitement. C'est ici.

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