Side navigation
#1725 closed bug (duplicate)
Opened September 25, 2007 04:22AM UTC
Closed October 14, 2007 10:32PM UTC
jQuery evaluates a script tag before the HTML is appended to the DOM.
| Reported by: | carlos.aguayo@gmail. | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.2.2 |
| Component: | core | Version: | 1.2.1 |
| Keywords: | Cc: | carlos.aguayo@gmail.com | |
| Blocked by: | Blocking: |
Description
I attached two files, index.html and demo.html. Access index.html, it will load "demo.html". demo.html contains a script tag that tries to get an HTML element that is also in demo.html, however the scripts obviously expects the node to be already present in the DOM.
Index.html:
<html>
<head>
<!--<script src="jquery-1.0.2.js"></script>-->
<script src="jquery-1.2.1.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$("#container").load("demo.html");
</script>
</body>
</html>
demo.html is the following:
<!-- demo.html -->
<div id="someWrapperDiv">
<div id="demo">demo</div>
<script>
var x = document.getElementById("demo");
if (x === null){
alert("element was not found");
} else {
alert("element was found");
}
</script>
</div>
Yes, it's weird that the SCRIPT tag is inside a DIV ("someWrapperDiv"), but please bear with me, besides, it's valid html.
When you hit index.html, using jquery-1.2.1.js you will get the alert "element was not found", if you use jquery-1.0.2.js you get "element was found".
In jquery-1.0.2.js, all the html was inserted an at the end, all the scripts were evaluated, so everything was fine.
In jquery-1.2.1.js, first I get to line 390. That will put in "a" an array with an element containing the "demo" div and the script tag.
It will get to line 402, and will try to evaluate whatever script contains elem, and then call "fn" (that is the appendChild). So it's evaluating the script before the appending takes place.
This is contained in the domManip function. And this function is only used by: append, prepend, before and after.
I'm not completely familiar with this code yet. I don't understand why jQuery evaluates the result of "evalScript" and then proceed to call "fn".
Shouldn't it first call to "fn" and then call "evalScript"?
So it would be something like:
402: fn.call( obj, elem);
403: evalScript( 0, elem );
This bug has already been submitted, and a patch that should correct the problem is available:
http://dev.jquery.com/ticket/1698