Jquery - Multiple $(Document).Ready ...

jQuery - multiple $(document).ready ...?

All will get executed and On first Called first run basis!!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo As you can see they do not replace each other

Also one thing i would like to mention

in place of this

$(document).ready(function(){});

you can use this shortcut

jQuery(function(){
   //dom ready codes
});

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

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

multiple $(document).ready and $(window).load in $(document).ready

Yes, jQuery grants that ready event will be called before load. Even in IE8- (where DOMContentLoaded is not supported) it works in that way. But let's look at the following code:

<!doctype html>

<title>Ready vs load test</title>

<style>body {white-space: pre}</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
  ~function () {
    function log(msg) {
      document.body.innerHTML += msg + "\n";
    }

    function handler(msg) {
      return function () {
        log(msg);
      }
    }

    $(window).load(handler("5. load #1"));
    $(document).ready(handler("1. ready #2"));
    $(window).load(handler("6. load #3"));
    $(document).ready(handler("2. ready #4"));
    $(document).ready(function () {
      log("3. ready #5");
      $(window).load(handler("8. load #6"));
    });
    $(document).ready(handler("4. ready #7"));
    $(window).load(handler("7. load #8"));
  }();
</script>

The result is

1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6

Look at lines 7 and 8. The load handled attached from ready event is the last one. So by using this way we can ensure that all previously added (during scripts parsing and exection) load handlers have already been called.

so using $(window).load outside the $(document).ready and inside doesn't change that much from how it'd affect how stuff work?

Actually it can affect script execution. The first version works and the second doesn't:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>  $(document).ready(function () {    $(window).load(function () {      $.magic.value = 12;    });  });</script>
<script>  $(window).load(function () {    $.magic = {};  });</script>

How to have multiple functions in jQuery ready?

Both functions can go inside the same document ready function:

<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
        $(this).hide();
    });
    $("banner").click(function() 
        $(this).fadeTo();
    });
});
</script>

However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")

How to pass multiple functions in document.ready

document.ready takes a single function as its argument. There is therefore no way to specify all of your functions as a list of parameters. You have a couple of different options for writing it differently with the same behaviour.

Create a new function to wrap your others
function initialise() {
myFunction();
anotherFunction();
}
$(document).ready(initialise);
Use jQuery's $(document).ready shortcut syntax
$(myFunction);
$(anotherFunction);

3a) Wrap them all in one function passed to document.ready

$(document).ready(function () { myFunction(); anotherFunction(); });

3b) Or equivalently using the shortcut syntax

$(function() { myFunction(); anotherFunction(); });

Jquery Multiple document ready and class

Thats for the functional scope in JS.
Here you define the class inside a function(first ready function), so its available only inside that function. If you want to make it global, try moving it outside the ready functions or add it to the window object(like below).

$(function() {  class Dog {    constructor() {    }    bark(){        console.log('bark')    }}  window.Dog = Dog;})

$(function() {  var teckel = new Dog()  teckel.bark()})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Multiple $(document).ready functions

No, they do not override each other. Each function is executed.

You could of course check this easily yourself: http://jsfiddle.net/6jgGt/

Or understand from the jQuery code itself:

Line 255 is the ready function where the jQuery.bindReady(); is called which among other things initialises the readyList object on line 429 with readyList = jQuery._Deferred();

And once it's a deferred object the function passed in is appended with readyList.done( fn ); and we can see in the done method on line 41 that the element is added to an array with callbacks.push( elem ); so each one is saved separately...

Execution order of $(document).ready();

Code gets executed from the top to the bottom.

HTML

<div id="document-ready"></div>

jQuery

$(document).ready(function() {
    $("#document-ready").append("Document ready 1<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 2<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 3<br>");
});

Output

Output (image)

JSFiddle demo

Explanation

You see that it first outputs 'Document ready 1', which means that that one got executed first.