click events won't work without breakpoint

mstone42

I'm having a problem that hopefully someone out there can help me with ...

My dataTable fetches data via ajax. The table displays fine, all the data is there - I can tab thru the pages, change page length, sort, etc. The problem is that as far as additional jquery functionality (e.g., click events), nothing works; ~UNLESS~ I have some kind of breakpoint during page load such as an alert (IE7 or Firefox3.6) or code breakpoint (using Firebug in FF3). If the breakpoint occurs, all the click events work fine. Without the breakpoint, none of the click events work. Other jQuery functionality that is NOT associated with the dataTable will work without the breakpoint.

Here's my table. I used the example from http://datatables.net/examples/api/row_details.html as my starting point.
[code]
$(function() {
oTable = $('#products').dataTable({
"bProcessing": true,
"sDom": '<"top"f>rt<"bottom"lip<"clear">',
"sAjaxSource": './fetchdata.php', // json formatted
"iDisplayLength": 12,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aaSorting": [[ 1, "desc" ],[ 3, "asc" ]],
"aoColumns": [
{ "sWidth":"1px", "bSortable": false, "sClass":"center" } // 0 - show/hide-details button
,{ "sWidth":"1px", "sClass":"center" } // 1 - inStock
,{ "bVisible": false } // 2 - product id
,{ "sWidth":"225px" } // 3 - product name
,{ "bVisible": false } // 4 - category id
,null // 5 - category name
,{ "bVisible": false } // 6 - subcat id
,null // 7 - sub category name
,{ "bVisible": false } // 8 - manager id
,{ "bVisible": false } // 9 - manager name
,{ "bVisible": false } // 10 - product description
,{ "bVisible": false } // 11 - qty on hand
]
});

// ============================
// BREAKPOINT to get the add-on click functions to work
// ============================
if (typeof oTable != 'undefined') alert('Table length = ' + oTable.length);

// drilling down thru the tables nodes (fnGetNodes) ensures we get all the rows,
// not just the few currently being displayed if we just used $('img.detail_switch')
$( oTable.fnGetNodes() ).children().find('img.detail_switch').each( function () {
$(this).click( function(){
var nTr = this.parentNode.parentNode; //table row id

/* This row is already open - close it */
if ( this.src.match('details_close') ) {
this.src = "../includes/images/dataTables/details_open.png";
this.title = "View Details";
oTable.fnClose( nTr );

/* Open this row */
} else {
this.src = "../includes/images/dataTables/details_close.png";
this.title = "Hide Details";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
});
});

/* Formating function for row details */
// data from the hidden fields is used to generate the record details
function fnFormatDetails ( nTr ) {
var sOut = ...
return sOut;
}
});
[/code]

The first column of data is generated during the ajax fetch.
[code]

[/code]

I'm using
jquery-1.4.2
jquery-ui-1.8
dataTables-1.6.2

Is this a timing issue, a bug in my code, or just my general lack of understanding?

Thanks in advance!
--Mitch