document.ready for multiple forms with single JavaScript file

Question

I am referencing JavaScript as follows on an HTML page:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>    
</script>
<script type="text/javascript" src="js/application.js"></script>
<script type="text/javascript">
$('document').ready(function() {   
// call some function specific to this page 
alert("this alert will only show for this particuar page");
});
</script>

My question is I have lot of functions especially bootstrap/jquery plugin functions to go inside document.ready(). As a result, there is lot of javascript code in all my html pages. How can I port all my functions that need to be executed inside document.ready to shared file application.js? I know that I can write a giant document.ready inside application.js to has all dom ready functions for all html files inside it. Is there any better option? Thank you for your help.

Edit:

Sorry if I was not clear. I was meaning to say: if there are two html pages: html1, html2 how do I tell my shared JavaScript file to execute document.ready functions for html1 and not for html2. If I understand it correctly, all functions inside document.ready will get executed every time a page loads.

Similar to my situation here

Answer 1

The best idea would be to move all your JS to application.js, and let this find out on which page it is.

The most simple solution is to look at the URL of the current page:

// jQuery
$(document).ready(function() {  
    if(document.location.pathname.matches(/your-page\.html/)) {
          // do someting
    }
});

But a more elegant and reusable solution is to look for specific elements you want to interact with:

// jQuery
$(document).ready(function() {  
    var someSpecialElement = $('#some-special-element');
    if (someSpecialElement.length) {
          // do someting
    } 
    var someOtherSpecialElement = $('#some-other-special-element');
    if (someOtherSpecialElement.length) {
          // do someting
    } 
});

or…

// Shiny Javascript
(function(){
    const someSpecialElement = document.querySelector('#some-special-element');
    if (someSpecialElement.length) {
          // do someting
    } 
    const someOtherSpecialElement = document.querySelector('#some-other-special-element');
    if (someOtherSpecialElement.length) {
          // do someting
    }
})();

Or you can put classes on your body-Tag and test after the HTML has loaded

// jQuery
$(document).ready(function() {  
    var body = $('body');
    if (body.hasClass('edit-some-stuff')) {
          // do someting
    } 
    if (body.hasClass('delete-some-stuff')) {
          // do someting
    } 
});

or …

// Shiny Javascript
(function(){
    const body = document.querySelector('body');
    if (body.classList.contains('edit-some-stuff')) {
          // do someting
    } 
    if (body.classList.contains('delete-some-stuff')) {
          // do someting
    } 
})();

Answer 2

You can use script defer attribute, it will make all your scripts load AFTER html is renderer. So it's equal to put all scripts under document ready. Here is the link:

http://www.w3schools.com/tags/att_script_defer.asp