[jQuery] Unexpected $(document).ready() behavior when jQuery is loaded after the page

Wed, 07 Oct 2009 17:22:49 -0700 

I am experiencing unexpected behavior using $(document).ready() on a
page where I inject jQuery after the page has loaded and then attach
listeners to the ready event. The ready() event is never called using
Firefox and Safari however it is called using IE.

Is this a jQuery bug? Is it working as designed? Any suggested work
arounds?

The example at the bottom of the email illustrates the problem. The
example is also available at: 
http://www.damagedsoftware.com/latejqueryready_test.html

Thanks,

Ryan Crumley

<html>
<head>
        <script>
                function jqueryHasLoaded() {
                        alert("jquery was loaded. Adding ready listener. Should 
see another
alert from ready.");
                        $(document).ready(function() {
                                alert("Hello from read()");
                        });
                }

                function loadjquery() {
                        var url = 
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js";
                        var head = document.getElementsByTagName("head")[0], 
done = false;
                        var script = document.createElement("script");
                        script.src = url;

                        script.onload = script.onreadystatechange = function() {
                                if (!done && (!this.readyState || 
this.readyState == "loaded" ||
this.readyState == "complete")) {
                                        done = true;
                                        jqueryHasLoaded();
                                }
                        };

                        head.appendChild(script);
                }
        </script>

</head>
<body>
        <input type="button" onClick="loadjquery()" value="Click to test"/>
</body>
</html>

Reply via email to