JavaScript - Three Onclicks Together

Hello all,

First I apologize if this has been answered. I did a quick search on the forums but found nothing that related entirely to this issue, also did a google search and found no entirely relevant posts. For those posts I did come across I tried various hacks (including holly hacks and setting background-colors) but nothing worked.

I'm not a web guru, so please feel free to pick apart and make suggestions for my code.

I have a table style div. Now I'm aware that table-style divs are in no way supported by any IE yet, so I have a CC that implements similar layout for all the IEs.

My issue is that this div is generated by javascript on jQuery's document ready. The div has a bunch of row divs, and below that it has cell divs. The cell divs are generated with an onclick attribute before they appended to the row divs. This works in all browsers except IE.

This code occurs in a for loop that creates a row and then inserts 7 'day divs' (where the row represents a week).

Code:

var thisDay = document.createElement('div');
if (curMonth != viewMonth)
{
	thisDay.className = 'JSCalViewNCMD';
}
thisDay.innerHTML = curDay.toString();
thisDay.onclick = "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");";
thisDay.setAttribute('onclick', "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");");
//dayDivs.push(thisDay);
curEl.appendChild(thisDay);
curDay++;
if (curDay > curDayLimit)
{
	curDay = 1
	curMonth++;
	if (curMonth === 12)
	{
		curMonth = 0;
		curYear++;
	}
	curDayLimit = JSCalendarGetMonthLength(curMonth);
	if (curMonth === 1 && curYear % 4 === 0)
	{
		curDayLimit = 29;
	}
}

This is the resulting generated HTML that IE developer window reports:
Code:

<div class="JSCal">
<DIV class=JSCalViewName>
<H3>June 2010</H3></DIV>
<DIV class=JSCalViewArea>
<DIV>
<H4>S</H4>
<H4>M</H4>
<H4>T</H4>
<H4>W</H4>
<H4>T</H4>
<H4>F</H4>
<H4>S</H4></DIV>
<DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,-1);">23</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,-1);">24</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,-1);">25</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,-1);">26</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,-1);">27</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,-1);">28</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,-1);">29</DIV></DIV>
<DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,-1);">30</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',31,-1);">31</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,0);">1</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,0);">2</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,0);">3</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',4,0);">4</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',5,0);">5</DIV></DIV>
<DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',6,0);">6</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',7,0);">7</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',8,0);">8</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',9,0);">9</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',10,0);">10</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',11,0);">11</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',12,0);">12</DIV></DIV>
<DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',13,0);">13</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',14,0);">14</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',15,0);">15</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',16,0);">16</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',17,0);">17</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',18,0);">18</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',19,0);">19</DIV></DIV>
<DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',20,0);">20</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',21,0);">21</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',22,0);">22</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,0);">23</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,0);">24</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,0);">25</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,0);">26</DIV></DIV>
<DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,0);">27</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,0);">28</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,0);">29</DIV>
<DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,0);">30</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,1);">1</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,1);">2</DIV>
<DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,1);">3</DIV></DIV></DIV>

However the onclicks do not fire! No errors are generated by my code in any of the browsers. The code works in the most up to date firefox, chrome, opera, and safari for windows.

I'm at a loss at what to do now...

I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle:

Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one!

Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something?


Please help if you can - I couldn't find anything related to this at all. Thanks