Can you have multiple document ready function sections

Question

If I have a lot of functions on startup do they all have to be under one single     document  ready function       or can I have multiple such statements

User · Answer

It s legal  but sometimes it cause undesired behaviour  As an Example I used the MagicSuggest library and added two MagicSuggest inputs in a page of my project and used seperate document ready functions for each initializations of inputs  The very first Input initialization worked  but not the second one and also not giving any error  Second Input didn t show up  So  I always recommend to use one Document Ready Function

User · Answer

Yes you can   Multiple document ready sections are particularly useful if you have other modules haging off the same page that use it  With the old window onload func declaration  every time you specified a function to be called  it replaced the old   Now all functions specified are queued stacked  can someone confirm   regardless of which document ready section they are specified in

User · Answer

Yes you can easily have multiple blocks  Just be careful with dependencies between them as the evaluation order might not be what you expect

User · Answer

You can use multiple  But you can also use multiple functions inside one document ready as well     document  ready function            Jquery         hide   hide            test   each function              this  fadeIn                    Reqular JS     function test word           alert word             test  hello

User · Answer

You can have multiple ones  but it s not always the neatest thing to do  Try not to overuse them  as it will seriously affect readability  Other than that   it s perfectly legal  See the below   http   www learningjquery com 2006 09 multiple-document-ready  Try this out     document  ready function         alert  Hello Tom            document  ready function         alert  Hello Jeff            document  ready function         alert  Hello Dexter           You ll find that it s equivalent to this  note the order of execution     document  ready function         alert  Hello Tom         alert  Hello Jeff         alert  Hello Dexter           It s also worth noting that a function defined within one   document  ready block cannot be called from another   document  ready block  I just ran this test     document  ready function         alert  hello1        function saySomething             alert  something              saySomething           document  ready function         alert  hello2        saySomething           output was   hello1 something hello2

User · Answer

You can even nest document ready functions inside included html files  Here s an example using jquery   File  test main html   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt script src  jquery-1 10 2 min js  gt  lt  script gt   lt  head gt    lt body gt       lt div id  main-container  gt           lt h1 gt test main html lt  h1 gt       lt  div gt    lt script gt        document  ready  function                 console log   test main html READY                 main-container   load  test embed html              lt  script gt    lt  body gt   lt  html gt    File  test embed html   lt h1 gt test embed html lt  h1 gt   lt script gt        document  ready  function                 console log   test embed html READY               lt  script gt    Console output   test main html READY                       test main html 15 test embed html READY                       program  4   Browser shows   test embed html

User · Answer

Yes it is possible to have multiple   document  ready   calls  However  I don t think you can know in which way they will be executed   source

User · Answer

I think the better way to go is to put switch to named functions  Check this overflow for more on that subject    That way you can call them from a single event    Like so   function firstFunction         console log  first       function secondFunction         console log  second        function thirdFunction         console log  third        That way you can load them in a single ready function   jQuery document  on  ready   function       firstFunction       secondFunction       thirdFunction           This will output the following to your console log   first second third   This way you can reuse the functions for other events    jQuery window  on  resize  function        secondFunction             Check this fiddle for working version

User · Answer

You can also do it the following way    lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script gt     document  ready function             hide   click function             test   hide                      show   click function             test   show                   lt  script gt   lt  head gt    lt body gt   lt h2 gt This is a test of jQuery  lt  h2 gt   lt p id  test  gt This is a hidden paragraph  lt  p gt   lt button id  hide  gt Click me to hide lt  button gt   lt button id  show  gt Click me to show lt  button gt   lt  body gt      the previous answers showed using multiple named functions inside a single  ready block  or a single unnamed function in the  ready block  with another named function outside the  ready block  I found this question while researching if there was a way to have multiple unnamed functions inside the  ready block - I could not get the syntax correct  I finally figured it out  and hoped that by posting my test code I would help others looking for the answer to the same question I had

User · Answer

Yes  it s perfectly ok but avoid doing it without a reason  For example I used it to declare global site rules seperately than indivual pages when my javascript files were generated dynamically but if you just keep doing it over and over it will make it hard to read   Also you can not access some methods from another      jQuery function       call so that s another reason you don t wanna do that   With the old window onload though you will replace the old one every time you specified a function

User · Answer

Yes it is possible but you can better use a div  mydiv and use both    document  ready function          and      mydiv   ready function

[jquery] Can you have multiple $(document).ready(function(){ ... }); sections?

Examples related to jquery