Why won't some jQuery code(s) work when isolated in unique <script> tags?
<p>This question is not code specific. It is a very general question, prompted by something I've been observing while building this website, and it really puzzles me.  </p>

<p>In the head section of the site I'm working on, I have all the jQuery codes that run the site, enclosed within  document ready methods, which are in turn enclosed within  tags in the head section of the site.  I usually put each code that performs a unique function, within unique script tags.  But I began to notice that some of my jQ codes wouldn't work at all when isolated in their own unique document ready method.  Then when I transposed this same code to a neighboring document ready method containing another unrealated code which already works, the said code works fine.</p>

<p>So the puzzle is, why wouldn't these codes work when isolated?  Are there certain circumstances when this might be the case? Perhaps there is something fundamental about jQuery/javascript that i don't understand that's going on here.  Has this been anyones's experience?  Answers appreciated.</p>

<hr>

<p>well here is one of the scripts that wont work on its own (when isolated). It loops through all the  elementss within an  checking if the href attribute matches the url. If it does, it adds a class to the <li> parent of that  element. The purpose is to highlight the appropriate menu item of the page being displayed.</p>

<pre><code>            &lt;script type = "text/javascript"&gt;


                $(document).ready(function() {


                                   //Menu highlights.

                    var curURL =  document.location.toString();

                    $('.topnav1  li.highlight').removeClass('highlight'); 



                    $('.topnav1 li a').each(

                         function(){

                                if  (curURL.indexOf(this.href) != -1){

                                   $(this).closest('li').addClass('highlight');

                            } 

                             }  

                    );  





                });







            &lt;/script&gt;
</code></pre>

<p>Well standing on its own, this script doesn't work, but once I include it within the document ready method of another unrelated script, it works. Here's what I mean.</p>

<pre><code>            &lt;script type = "text/javascript"&gt;
    //To load ajax pages. And menu highlights.



                $(document).ready(function() {


                                   //Menu highlights.

                    var curURL =  document.location.toString();

                    $('.topnav1  li.highlight').removeClass('highlight'); 



                    $('.topnav1 li a').each(

                         function(){

                                if  (curURL.indexOf(this.href) != -1){

                                 $(this).closest('li').addClass('highlight');

                                } 

                             }  

                    );  








                            //Load pages via Ajax

                    // Check for hash value in URL


                    var hash = window.location.hash.substr(1);


                    var href = $('.topnav li  a').each(function(){


                 var href = $(this).attr('href');


                         if(hash==href.substr(0,href.length-5)){


                        var toLoad = hash+'.html  .wrapper_inner';


                        $('.wrapper_inner').load(toLoad)


                        }


                    });





                $('.topnav li a').click(function(){





                    var toLoad = $(this).attr('href')+' .wrapper_inner';


                $('.wrapper_inner').slideUp('fast',loadContent);


                        $('#load').remove();


                        $('#tier3').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');


                        $('#load').fadeIn('normal');


                        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);


                        function loadContent() {


                    $('.wrapper_inner').load(toLoad,'',showNewContent())


                        }


                        function showNewContent() {


                    $('.wrapper_inner').slideDown('slow',hideLoader());


                        }


                        function hideLoader() {


                    $('#load').fadeOut('normal');


                        }


                        return false;





                    });


            });//End of ducument ready method











            &lt;/script&gt;
</code></pre>

<p>This I may add is just one example. I have two other scripts that didn't work on their own but worked once I boxed them in with the above script.              </p>
