Let me try to explain this. I'm creating a a bunch of div layers dynamically which all contain child elements in some form or fashion. Point being, I'm creating a link dynamically and adding a class name to it. Then I have a bit of JQuery code that binds a click function to that class name. When I click the link in IE7, everything functions as expected. In FireFox, however, the DHTML created link can't find the click function I created with JQuery. I will paste the code below, which is self functioning and can be pasted into your editor without depending on anything else, so you can see the problem first hand. I've tried every combination of combining the javascript into one area, putting my code in the document.ready function, window.load function, everything and I just can't get this to work.
You notice that the "Expand All Profiles" link does work because it's not created with DHTML, but the "+ View Profile" link does not work as it was created with DHTML. This is only in FireFox... IE7 seems to work fine. Haven't tested IE6. Any help would be soo greatly appreciated, I'm pulling my hair out here. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled</title> <script src="http://accountant.intuit.com/includes/scripts/jquery- latest.js"></script> <script type="text/javascript"> $(function(){ var aniSpeed = 500 $(".showProfile").click(function(){ alert('click'); var isDisplayed = $(this).parent().next(); if (isDisplayed.css("display") == 'none') { isDisplayed.slideDown(aniSpeed); $(this).text("- Close Profile"); } else { isDisplayed.slideUp(aniSpeed); $(this).text("+ View Profile"); } return false; }); $(".expandCollapse").click(function(){ var isDisplayed = $(".fullProfile") if (isDisplayed.css("display") == 'none') { isDisplayed.slideDown(aniSpeed); $(this).text("- Collapse All Profiles"); $(".showProfile").text("- Close Profile"); } else { isDisplayed.slideUp(aniSpeed); $(this).text("+ Expand All Profiles"); $(".showProfile").text("+ View Profile"); } return false; }); }); function createDivs() { // 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') taxProListingMapMark.setAttribute('src','/images/duh.jpg'); taxProListingMapMark.setAttribute('height',16); taxProListingMapMark.setAttribute('width',16); // Add the Map Marker Image to the Map Marker Column Container taxProListingMapCol.appendChild(taxProListingMapMark); // Add the Map Marker Column Container to the Main Container taxProListingRowCont.appendChild(taxProListingMapCol); // Create the Name Column Container var taxProListingNameCol = document.createElement('div'); taxProListingNameCol.className='nameCol'; taxProListingNameCol.appendChild(document.createTextNode('John Doe')); // Add the Name Column Container to the Main Container taxProListingRowCont.appendChild(taxProListingNameCol); // Create the Contact Information Container var taxProListingContactCol = document.createElement('div'); taxProListingContactCol.className='contactCol'; taxProListingContactCol.appendChild(document.createTextNode('phone number')); taxProListingContactCol.appendChild(document.createElement('br')); taxProListingContactCol.appendChild(document.createTextNode('full address')); taxProListingContactCol.appendChild(document.createElement('br')); // Create the Contact Email Address Link var taxProListingContactEmail = document.createElement('a'); taxProListingContactEmail.setAttribute('href','mailto:[EMAIL PROTECTED]'); taxProListingContactEmail.appendChild(document.createTextNode('[EMAIL PROTECTED]')); // Add the Contact Email Address Link to the Contact Information Container taxProListingContactCol.appendChild(taxProListingContactEmail); // Add the Contact Information Container to the Main Container taxProListingRowCont.appendChild(taxProListingContactCol); // Create the View Profile Link Container var taxProListingViewProCol = document.createElement('div'); taxProListingViewProCol.className='profileCol'; // Create the View Profile Link var taxProListingViewProLink = document.createElement('a'); taxProListingViewProLink.className='showProfile'; taxProListingViewProLink.setAttribute('href','javascript:void(0);'); taxProListingViewProLink.appendChild(document.createTextNode('+ View Profile')); // Add the View Profile Link to the View Profile Container taxProListingViewProCol.appendChild(taxProListingViewProLink); // Add the View Profile Container to the Main Container taxProListingRowCont.appendChild(taxProListingViewProCol); // Create the Full Profile Container var taxProListingFullProfile = document.createElement('div'); taxProListingFullProfile.className='fullProfile'; // Create the Full Profile Padding Container var taxProListingFullProfilePad = document.createElement('div'); taxProListingFullProfilePad.className='fullProPad'; taxProListingFullProfilePad.appendChild(document.createTextNode('This is the full profile.....')); // Add the Full Profile Padding Container to the Full Profile Container taxProListingFullProfile.appendChild(taxProListingFullProfilePad); // Add the Full Profile Container to the Main Container taxProListingRowCont.appendChild(taxProListingFullProfile); // Add the Main Container to the page document.getElementById('taxProContainer').appendChild(taxProListingRowCont); document.getElementById('taxProContainer').appendChild(taxProListingClear); } </script> <style type="text/css"> body {padding: 10px;} #taxProListingTitleCont {float: left; background: #eee; border: 1px solid #ccc; font-weight: bold;} .taxProListingRowCont {float: left; border: solid #ccc; border-width: 0px 1px 1px 1px;} .mapCol {float: left; padding: 10px; width: 40px; text-align: center;} .nameCol {float: left; padding: 10px; width: 150px;} .contactCol {float: left; padding: 10px; width: 310px;} .profileCol {float: left; padding: 10px; width: 90px;} .fullProfile {display: none; clear: both;} .clear {clear: both; font-size: 1px; height: 0px;} .fullProPad {padding: 10px;} </style> </head> <body onload="createDivs();"> <a href="javascript:void(0);" class="expandCollapse">+ Exand All Profiles</a> <br /><br /> <div id="taxProListingTitleCont"> <div class="mapCol">Map:</div> <div class="nameCol">Name:</div> <div class="contactCol">Contact Information:</div> <div class="profileCol">Profile:</div> </div> <div class="clear"> </div> <div id="taxProContainer"></div> </body> </html>