[jQuery] Lookup doesn't work within HTML loaded with .load()
Greetings,
I have a nasty surprise: jQuery (1.2.1) won't access DOM elements that
have been inserted via .load() function.
Example:
index.html:
---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/
xhtml1-transitional.dtd">
<html><head><title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
</head><body>
<div id="left" style="float: left; width: 30%">
Left
</div>
<div id="left" style="float: right; width: 69%">
Right
</div>
</body>
</html>
test.js:
---------
$(document).ready(prolog);
function prolog() {
$("#left").load("test.html");
$("#left").css("border","1px solid red");
$("#test").css("border","1px solid green");
$("#left #test").css("border","1px solid green");
}
test.html:
-------------
<div id="test">
Test
</div>
After I load the index.html, I expect to see the "#left" div
containing the test.html content; with #left with red border and #test
with green.
However, #test has no green border; in fact, I can't at all address
the newly loaded HTML part, as it were not exist at all. I tried two
kidns of addressing (in the test.js above) with no effect.
How can I address the HTMl loaded via .load() function?
Thanks.
All the best,
Konstantin