[jQuery] My .click() is not working... :o(
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Courier New, Courier, monospace">I've got a
stumper... well it's a stumper to me. I'm hoping someone here can help
me with it. I posted the problem before, but it's slightly different
now.
In the function to follow, I'm adding a div element to the DOM that
represents a "row". Each row has a unique ID. For each of these divs
I'm adding a mouseover, mouseout, and click event. All three work
perfectly for all but the last row. It's like the events never get
assigned.
In this case, the user can select several dates from calendars and add
them to a list. This list is what's represented by these rows (one row
for each date). If the user adds just one row, the click event fails to
bind. If the user adds any other number of rows the last row will fail.
If the user adds four rows and then adds four more (or five more or six
more... it doesn't matter). The last one in the first group fails, and
so does the last one in the next group.
Here's my code: (NOTE: the use of the double pounds(##) is intentional.
I'm writing in ColdFusion and this is how the pound sign is escaped.)
function AddToPending(){
var OTAIndex = 0;
var i, NumberOfRows, ThisRow, RowClass, ThisIndex;
var SelectedDates = "";
var OrdersToAdd = new Array;
// gather relevant data from the DOM
var CostCenterInfo = $("##CostCenterName_ID").val();
CostCenterInfo = CostCenterInfo.split("~");
//var CostCenterID = CostCenterInfo[0];
var CostCenterName = CostCenterInfo[1];
var ShiftData = $("##Shift_ID").val();
ShiftData = ShiftData.split("~");
var ShiftCode = ShiftData[0];
var ShiftID = ShiftData[1];
var ShiftName = ShiftData[2];
var Classification = $("##Classification_ID").val();
var Quantity = $("##Quantity_ID").val();
var SpecialInstructions = $("##SpecialInstructions_ID").val();
// this one gets the dateValue of each selected cell and adds
everything to the array of structs.
$("td[@status=on]").each(function() {
OrdersToAdd[OTAIndex] = new Object;
OrdersToAdd[OTAIndex].ShiftDate = this.dateValue;
OrdersToAdd[OTAIndex].CostCenterName = CostCenterName;
OrdersToAdd[OTAIndex].ShiftName = ShiftName;
OrdersToAdd[OTAIndex].ShiftID = ShiftID;
OrdersToAdd[OTAIndex].ShiftCode = ShiftCode;
OrdersToAdd[OTAIndex].Classification = Classification;
OrdersToAdd[OTAIndex].Quantity = Quantity;
OrdersToAdd[OTAIndex].SpecialInstructions = SpecialInstructions;
OTAIndex++;
});
if(!OTAIndex){alert("Please select at least one date from the
calendars on the left.");return;}
OrdersToAddJSON = $.toJSON(OrdersToAdd);
$.ajax({
type: "POST",
url: "JSON_WriteOrderData.cfm",
datatype: "html",
data: "ClientNumber=#ThisClientNumber#&OrderStruct=" +
OrdersToAddJSON,
success: function(IndexList) {
NumberOfRows = CFJS.ListLen(IndexList);
alert(IndexList);
for(i = 0; i < NumberOfRows; i++){
ThisIndex = CFJS.ListGetAt(IndexList, i + 1);
//alert(ThisIndex);
ThisTmpDate =
$.odbcDateTimeParse(OrdersToAdd[i].ShiftDate);
ThisMonth = ThisTmpDate.getMonth() + 1;
ThisDay = ThisTmpDate.getDate();
ThisYear = ThisTmpDate.getFullYear();
ThisDate = ThisMonth + "/" + ThisDay + "/" +
ThisYear;
RowClass = "OddRow";
/*
if(i % 2){
RowClass = "EvenRow";
}
*/
ThisRow = "";
ThisRow += "<div class=\"OrderEntryListRow " +
RowClass + "\" RowType=\"" + RowClass + "\" RowState=\"Off\" ID=\"Row_"
+ ThisIndex + "\">\n";
ThisRow += "<span class=\"Date Cell\">" +
ThisDate + "</span> \n";
ThisRow += "<span class=\"CostCenter Cell\">"
+ CostCenterName + "</span> \n";
ThisRow += "<span class=\"ShiftName Cell\">"
+ ShiftName + "</span> \n";
ThisRow += "<span class=\"Classification
Cell\">" + Classification + "</span> \n";
ThisRow += "<span class=\"Quantity Cell\">" +
Quantity + "</span>\n";
ThisRow += "</div>";
$("##OrderList").append(ThisRow);
$("##Row_" + ThisIndex).mouseover(function(){
$(this).removeClass("OddRow");
$(this).addClass("OddOver");
}).mouseout(function(){
$(this).removeClass("OddOver");
$(this).addClass("OddRow");
}).click(function(){
alert($(this).attr("ID"));
OrderListClickEvents($(this).attr("ID"));
});
}
},
error: function(){
alert("Error: Please note the username and the time and
called the Nursefinders helpdesk for assistance.");
}
});
}
Anybody have a clue what I'm doing wrong?
</font></font>
<pre class="moz-signature" cols="72">--
<a class="moz-txt-link-freetext" href="http://www.cjordan.info">http://www.cjordan.info</a></pre>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/