Nested Drill-Down Datatables

spy890

Hey guys, I am having a small issue getting nested datatables with drill-down functionality to work correctly.
I'm trying to nest tables in the following order Table 1 > SubTable 2 > SubTable 3.
I followed this example (http://datatables.net/examples/api/row_details.html) to get everything working and I can expand from 1 into 2 and from 2 into 3 just fine. The problem I am having occurs after following these steps:
1) Expand row from table 1
2) Expand row from table 2.
3) Close table 1 row (with or without closing row from table 2 first)
4) Expand row from table 1
5) Expand row from table 2

After expanding a row from table 2 (for the second time per following the steps), it immediately closes itself. I can see the row slide down, and then it slides right back up.

Here's my code for the drill-down tables
[code]
var anOpen = [];
var anOpen2 = [];
var Table1;
var Table2;
var Table3;

Table1 = InitializeDatatable1($("#Table1"));

$('#Table1 td.Control').live('click', function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);

if (i == -1) {
$('img', this).attr('src', sImageUrl + "details_close.png");
var nDetailsRow = Table1.fnOpen(nTr, fnFormatDetails(Table1, nTr), 'details');
$('div.innerDetails1', nDetailsRow).slideDown();
anOpen.push(nTr);
/* Begin: Opens a subrow and inserts Table2 into it. Then turns Table2 into its own datatable and adds drill-down functionality */
Table2= InitializeDatatable2($("#Table2"));
$('#Table2Div td.Control').live('click', function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen2);

if (i == -1) {
//alert('1');
$('img', this).attr('src', sImageUrl + "details_close.png");
var nDetailsRow = Table2.fnOpen(nTr, fnFormatDetails(Table2, nTr), 'details');
$('div.innerDetails2', nDetailsRow).slideDown();
anOpen2.push(nTr);
Table3= InitializeDatatable3($("#Table3"));
} else {
//alert('2');
$('img', this).attr('src', sImageUrl + "details_open.png");
$('div.innerDetails2', $(nTr).next()[0]).slideUp(function () {
Table2.fnClose(nTr);
anOpen2.splice(i, 1);
});
}
});
/* End */
} else {
$('img', this).attr('src', sImageUrl + "details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
Table1.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});

function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
''+
''+
'Rendering engine:'+oData.engine+''+
'Browser:'+oData.browser+''+
'Platform:'+oData.platform+''+
'Version:'+oData.version+''+
'Grade:'+oData.grade+''+
''+
'';
return sOut;
}
[/code]

If anyone can give me any guidance into figuring out why the row closes itself or an example to follow for nesting drill-downs, it would be greatly appreciated. Thanks!

spy890

Figured it out. Instead of using .live() to attach the onclick listener, use .bind() or .on()