(donation) Adding an event handler to a TD element after fnAddData() call.

kyle.lee

After calling fnAddData(), I'm trying to set the onClick property of a specific TD so that when clicked, it sends a POST request to the server and deletes the selected item.

[code]
var lineItemID = $.ajax({
type: "POST",
url: "../lineItem/addLineItems",
contentType: "text/plain",
dataType: 'json',
async: false,
data: JSON.stringify(lineItems)
}).responseText;

dTable.fnAddData([
$('#itemCode').val(),
$('#description').val(),
"${new Date().getDateString()}",
$('#labor').val(),
$('#material').val(),
$('#lineItemGroup').find('option').filter(':selected').text(),
' '
]);

$('#' + lineItemID).parent("td").click(function () {
var aPos = dTable.fnGetPosition(this);
dTable.fnDeleteRow(aPos[0]);
$.post("../lineItem/delete", { id: lineItemID } );
});

$('#' + lineItemID).parent("td").addClass("action");
[/code]

It works fine whenever pagination doesn't occur. After pagination occurs, the deletion cell on any rows added to the table on a non-visible page receive neither the "action" class nor the event handler. I can set the CSS class with the aoColumns property in the datatable initialization as a workaround, but I can't figure out what to do about the event handler, or why it isn't being properly assigned. Any help would be greatly appreciated.

allan

Hi kyle.lee,

The issue here is that DataTable will add the row to the table's "database" (not really a database, just an internal cache) - but may or _may not_ add it to the live DOM. The query $('#' + lineItemID) needs the new element to be in the DOM - but if the added row is off the "page", this simply won't work.

So there are two ways to deal with this:

1. Live events
2. Use the return from fnAddData

If you were only doing events (i.e. not the class as well) then I would suggest using live events. In fact thinking about it this might still be the best option - you could use sClass ( http://datatables.net/usage/columns#sClass ) to add the class - then DataTables will put that class on every cell in that column. Then all you need to do is change the selector to something like:

[code]
$("#table_id tbody td:nth-col(4)").live('click', function() {
[/code]
If that option doesn't take your fancy, then the return from fnAddData will give you an array of integers which point to the internal cache that DataTables maintains for the data it is displaying. You could then do something like:

[code]
var lineItemID = $.ajax({
type: "POST",
url: "../lineItem/addLineItems",
contentType: "text/plain",
dataType: 'json',
async: false,
data: JSON.stringify(lineItems)
}).responseText;

var a = dTable.fnAddData([
$('#itemCode').val(),
$('#description').val(),
"${new Date().getDateString()}",
$('#labor').val(),
$('#material').val(),
$('#lineItemGroup').find('option').filter(':selected').text(),
' '
]);

var aoData = dTable.fnSettings().aoData;
for ( var i=0, iLen=a.length ; i