What are the side effects (if any) of multiple $(document).ready() in an HTML page?

I am using a web application framework (Symfony 1.3.6), which follows the MVC pattern.

The view layer is comprised of a template decorator. The template file may also include other templates - this is what gives rise to my question.

Assuming that there is a page (lets call it the 'homepage'), which is comprised of several templates - (the code has been refactored out so the 'sub templates' can be used on other pages.

As a result of the refactoring, the small templates - which are used by the main template - ('homepage' in our example), need to contain their jQuery related code.

lets say the homepage template uses 2 'sub templates:

template A
template B

assume that template A consists of the following snippet:

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

assume that template B consists of the following snippet:

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

Now the template 'homepage' looks like this:

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>

I have tried this - and to my suprise, it worked in that there was only one $(document).ready() in the merged, final page ('homepage).

I am not sure if either my Browser (Firefox) or the web framework (Symfony), had done some 'cleaning up' behind the scenes.

So my question is that what is the best way to proceed if you want to refactor jQuery functionality into 'little reusable templates' that can be reused to provide the same functionality in different pages?

BTW, I hope no one suggests writing a jQuery plugin, as that is SO not what I'm talking about.

karim79

There are no problems with multiple $(document).ready() calls, only a couple of caveats:

Reduced readability.
Scope: a function/variable/object declared inside one $(document).ready() will not be visible in any others. See this simple demo.

Also see this previous question on SO:

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

You can indeed use as many instances of $(document).ready() on a page as you like. You can group your blocks of initialization code in whichever way makes the most sense for your application. What you gain in flexibility you may lose a bit in clarity, though, since it's no longer as easy to see what happens when onLoad fires.

References: jQuery Tutorial on Multiple $(document).ready()

If you want to reuse js code snippets on different pages, you can use the view.yml config file in each of your modules like this:

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]

来源：https://stackoverflow.com/questions/3538161/what-are-the-side-effects-if-any-of-multiple-document-ready-in-an-html-pa

标签

jquery

document-ready