[jQuery] Can't access newly created DOM from XML
So now I've integrated my expand / contract profile functionality, I
mashed it up with xml and all hell has broken loose. Basically, I am
dynamically making div layers, attaching an anchor link and setting
it's class on the fly from XML. This DOM elements load after the page
loads, even though they're the first thing to be called and my on
click events are the last thing to be called. Has anyone had a
similar problem when using XML on a page that creates anchor links
with an associated click event from JQuery, but it doesn't work
because the DOm loads after the page loads. This probably makes no
sense, and because I am now using google maps with it, the code will
be useless on someone elses machine, but here it is...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-
microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>TurboTax PPC Local Tax Pro Search</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-
m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></
script>
<script src="http://accountant.intuit.com/includes/scripts/jquery-
latest.js"></script>
<script type="text/javascript">
$(function(){
initialize();
createDivs();
function createDivs() {
// Download the data in data.xml and load it on the map.
GDownloadUrl(strXmlFile, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var strName = xml.documentElement.getElementsByTagName("name");
var strPhone = xml.documentElement.getElementsByTagName("phone");
var strAddress1 =
xml.documentElement.getElementsByTagName("address1");
var strCity = xml.documentElement.getElementsByTagName("city");
var strState = xml.documentElement.getElementsByTagName("state");
var strZipcode =
xml.documentElement.getElementsByTagName("zipcode");
var strCerts =
xml.documentElement.getElementsByTagName("certifications");
var strMessage =
xml.documentElement.getElementsByTagName("message");
for(var i=0;i<markers.length;i++) {
var name = strName[i].childNodes[0].nodeValue;
var phone = strPhone[i].childNodes[0].nodeValue;
var address = strAddress1[i].childNodes[0].nodeValue + ", " +
strCity[i].childNodes[0].nodeValue + ", " +
strState[i].childNodes[0].nodeValue + " " +
strZipcode[i].childNodes[0].nodeValue;
var message = strMessage[i].childNodes[0].nodeValue;
// Create Div Layer to Clear Floats
var taxProListingClear = document.createElement('div');
taxProListingClear.className='clear';
taxProListingClear.appendChild(document.createTextNode('\u00a0'));
// Create the Main Container
var taxProListingRowCont = document.createElement('div');
taxProListingRowCont.className='taxProListingRowCont';
// Create the Map Marker Column Container
var taxProListingMapCol = document.createElement('div');
taxProListingMapCol.className='mapCol';
// Create the Map Marker Image
var taxProListingMapMark = document.createElement('<img
src="images/marker' + getLetter(i) + '.png" width="20" height="34"
class="letterMark" onclick="javascript:showInfoWindow(0,' + i + ');" /