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>
