Quand dois-je utiliser du jQuery document.fonction ready?

M'a dit d'utiliser document.prêt quand j'ai commencé à utiliser du Javascript/jQuery mais je n'ai jamais vraiment appris pourquoi.

Quelqu'un pourrait fournir quelques directives de base sur lorsque cela a du sens pour l'envelopper de javascript/jquery code à l'intérieur de jQuery document.ready?

Certains sujets, je suis intéressé par:

  1. de jQuery .on() méthode: j'utilise la .on() méthode pour AJAX un peu (en général sur le de créer dynamiquement des éléments du DOM). Si le .on() cliquez sur gestionnaires de toujours être à l'intérieur de document.ready?
  2. De Performance: Est-il plus performant pour garder divers javascript/jQuery objets à l'intérieur de ou à l'extérieur document.prêt (d'ailleurs, est la différence de performance significative?)?
  3. La portée de l'objet: AJAX-pages chargées ne peuvent pas accéder à des objets qui ont été à l'intérieur de la page précédente du document.prêt, correct? Ils ne peuvent accéder à des objets qui ont été à l'extérieur document.prêt (c'est à dire, vraiment "mondiale" des objets)?

Mise à jour: De suivre les meilleures pratiques, tout mon javascript (la bibliothèque jQuery et mon code d'applications) est à la bas de ma page HTML et je suis en utilisant le defer attribut sur le jQuery contenant des scripts sur mon AJAX chargement des pages afin que je puisse accéder à la bibliothèque jQuery sur ces pages.

  • Parce que si le DOM n'est pas prêt, vous pouvez obtenir des résultats inattendus, c'est tout.
  • 2.- Eh bien, je utiliser hors juste à déboguer et de peuvent appeler certains var/fonction par la console,
  • quel genre de "inattendue" des résultats? pouvez-vous me donner un exemple?
  • Vous essayez de modifier un élément ou un attribut qui n'est pas fait pour les DOM encore.
InformationsquelleAutor tim peterson | 2012-10-25
  1. 140

    Dans des mots simples,

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

    Supposons que vous avez placé votre code jQuery dans head l'article et essayer d'accéder à un dom élément (une ancre, d'une img, etc), vous ne serez pas en mesure d'y accéder parce que html est interprété de haut en bas et de vos éléments html ne sont pas présents lors de votre jQuery code s'exécute.

    Pour surmonter ce problème, nous plaçons chaque jQuery/javascript code (qui utilise les DOM) à l'intérieur de $(document).ready fonction qui est appelée lorsque tous les dom éléments peut être consulté.

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

    Il n'est pas nécessaire de placer on méthode à l'intérieur d' $(document).ready uniquement lorsque vous utilisez on méthode sur document à cause de la même raison que j'ai expliqué 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 () {
    });

    MODIFIER

    De commentaires,

    1. $(document).ready ne pas attendre pour les images ou les scripts. C'est la grande différence entre $(document).ready et $(document).load

    2. Seulement le code qui accède à la DOM devrait être prêt gestionnaire. Si c'est un plugin, il ne devrait pas être dans l'événement ready.

    • Oui, pourquoi pas ? Nous sommes juste très utilisé pour l'utiliser $(document).ready. Voir ceci
    • Aussi longtemps que vous le chargement de jQuery dans le head et vous êtes scripts d'après les éléments manipulés, document.ready n'est pas nécessaire. Les Images sont un cas spécial, mais...
    • +1 bonne explication! 🙂
    • Voir ma mise à jour de question. Je suis de chargement de jQuery dans le bas de ma page HTML avec mon spécifiques à l'application code de droit après.
    • comment sur les différences de rendement des dom.prêt ou non? Sont celles qui sont pertinentes?
    • Je ne pense pas qu'il y ait beaucoup de différence en termes de performances (il y a eu une dégradation des performances dans le cas de live mais on fonctionne différemment). Vous pouvez toujours utiliser les jsperf. Si vous mettez en jQuery à fond, pourquoi à l'aide de dom.ready ? Si ce n'est plus, au moins les augmentations une fonctionnelle d'appel.
    • Nous ne les mettons pas tous les jQuery code dans le prêt gestionnaire. Seulement le code qui accède au DOM. Si c'est un plugin, il ne devrait pas être dans le ready événement
    • bien expliqué ,+1
    • très belle expliqué bro...+1
    • C'est pourquoi nous aimons ce site. Je vous remercie. 1++ 🙂
    • Je ne suis pas sûr que je suis bon, mais quand vous mettez un événement à l'intérieur du document.prêt, il va échouer. Est-ce réel? (s'il vous plaît, quelqu'un, de protéger cette question, trop de +1 commentaires...)
    • upvoted! si votre script est dans le bas du corps, pourquoi avez-vous besoin de documents.est-il prêt?
    • Vous n'avez pas besoin document.ready si vous script est placé après les éléments DOM, il va utiliser. Si c'est dans le bas du corps, vous n'avez pas besoin document.ready à tous.

    InformationsquelleAutor Jashwant
  2. 7

    Réponses:

    de jQuery .sur() méthode: - je utiliser l' .sur() la méthode AJAX un peu
    (création dynamique d'éléments du DOM). Si l' .sur les() des gestionnaires de clic
    toujours être à l'intérieur du document.prêt?

    Non, pas toujours. Si vous chargez votre JS dans le head document, vous devrez. Si vous créez les éléments après le chargement de la page via AJAX, vous aurez besoin de. Vous n'aurez pas besoin de si le script est en dessous de l'élément html à l'ajout d'un gestionnaire de trop.

    De Performance: Est-il plus performant pour garder divers javascript/jQuery
    des objets à l'intérieur ou à l'extérieur du document.prêt (d'ailleurs, est la différence de performance significative?)?

    Il dépend. Il va prendre la même quantité de temps pour joindre les gestionnaires, cela dépend si vous voulez que cela se produise immédiatement que le chargement de la page, ou si vous voulez attendre jusqu'à ce que toute la doc est chargé. Donc ça dépendra de ce que d'autres choses que vous faites sur la page.

    La portée de l'objet: AJAX-pages chargées ne peuvent pas accéder à des objets qui étaient à l'intérieur
    l'état de la page du document.prêt, correct? Ils ne peuvent accéder à des objets
    qui étaient à l'extérieur du document.prêt (c'est à dire, vraiment "mondiale" des objets)?

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

    InformationsquelleAutor Justin
  3. 5

    Avant de vous pouvez les utiliser jQuery, vous devez vous assurer que la page est dans un état où il est prêt être manipulés. Avec jQuery, nous accomplissons cela en mettant notre code dans une fonction, puis passage que la fonction de $(document).prêt(). La fonction que nous avons pass peut être juste une fonction anonyme.

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

    Ce sera l'exécution de la fonction que l'on passe à l' .prêt() une fois que le document est prêt. Ce qui se passe ici? Nous sommes à l'aide de $(document) pour créer un objet jQuery à partir de notre page de document, puis d'appeler la .prêt() la fonction de cet objet, en lui passant la fonction que nous voulons exécuter.

    Puisque c'est quelque chose que vous allez trouver vous-même faire beaucoup, il y a une méthode abrégée pour cela, si vous préférez — le $ (), fonction ne double devoir comme un alias pour $(document).prêt() si vous passer d'une fonction:

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

    C'est une bonne lecture: Jquery Principes De Base

    • À ne pas confondre avec (function($){ })(jQuery); qui enveloppe votre code, de sorte que $ jQuery est à l'intérieur que la fermeture
    InformationsquelleAutor Tom Sarduy
  4. 3

    .prêt() - Spécifier une fonction à exécuter lorsque le DOM est chargé complètement.

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

    Voici une Liste de toutes les Méthodes jQuery

    Lire sur l'Introduction de $(document).prêt()

    InformationsquelleAutor Dipak
  5. 3

    Pour être réaliste, document.ready n'est pas nécessaire pour rien d'autre que de la manipulation du DOM avec précision et il n'est pas toujours nécessaire que le ou la meilleure option. Ce que je veux dire, c'est que lorsque vous développez un grand plugin jQuery par exemple vous avez à peine l'utiliser dans le code parce que vous essayez de garder au SEC, de sorte que vous abstrait, autant que possible, des méthodes pour manipuler le DOM, mais sont destinées à être invoquée plus tard. Lorsque votre code est étroitement intégré la seule méthode exposée dans document.ready est généralement init où tous les DOM magie se produit. Espérons que cela répond à votre question.

    InformationsquelleAutor elclanrs
  6. 0

    Vous devez lier toutes les actions dans le document.prêt, parce que vous devez attendre jusqu'à ce que le document est entièrement chargé.

    Mais, vous devez créer des fonctions pour toutes les actions et de les appeler dans le document.prêt. Lorsque vous créez des fonctions (vos objets globaux), les appeler quand vous le souhaitez. Donc, une fois que votre nouveau chargement des données et de nouveaux éléments créés, l'appel à ces fonctions, de nouveau.

    Ces fonctions sont celles où vous avez lié les événements et les éléments d'action.

    $(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...);
}
    InformationsquelleAutor Pulkit Mittal
  7. 0

    J'ai ajouté un lien vers un div et je voulais faire quelques tâches sur le clic. J'ai ajouté le code ci-dessous la annexé élément dans le DOM, mais il ne fonctionne pas. 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>

    Il n'a pas de travail. Puis j'ai placé le code jQuery à l'intérieur de $(document).prêt et il a parfaitement fonctionné. Ici, il est.

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

    - il prêt événement se produit lorsque le DOM (document object model) a été chargé.

    Parce que cet événement se produit lorsque le document est prêt, c'est un bon endroit pour tous les autres jQuery événements et des fonctions. Comme dans l'exemple ci-dessus.

    Le prêt() la méthode spécifie ce qui se passe lorsqu'un prêt événement se produit.

    Astuce: Le ready() la méthode ne doit pas être utilisé conjointement avec d' .

    InformationsquelleAutor Shrikant Shiledar