After adding a new row (fnAddData), how to add click handler?

PaoloValladolid

Sorry for the basic JQuery question, but how do I add a click handler to a row just added by fnAddData? The code snippet below does not work (the new row is not highlighted/unhighlighted with a click).

var oSettings = ingredientsTable.fnSettings();
var nTr = oSettings.aoData[ newRowArray[0] ].nTr;
$('nTr').live('click', function(event) {
if ( $(this).hasClass('row_selected') ){
$(this).removeClass('row_selected');
} else {
$(this).addClass('row_selected');
}
});

rdahl

I recommend that you simply rely on the functionality provided by jquery and not worry about dataTables at all:

$('tr').live('click', function(event){
$(this).toggleClass('row_selected')
});

Should do what you want, if you want to limit it to just the "ingredients table" then replace the first line with:

$('tr' '#ingredientTableID').live('click', function(event){

you can put the $.live anywhere, even in the "$(document).ready(function(){", it will apply to all elements currently created or those that are added to the DOM later that match the selector.

Also toggleClass does exactly what your if-else statement does.

PaoloValladolid

Thanks for the tip about toggleClass. It works great for multple select scenarios.

I solved my problem by enforcing single select only and repeating the code that sets the handler after adding the row.

In $(document).ready...

$(tableRowsQuery).click(function(event) {
$(ingredientsTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(this).addClass('row_selected');

var aPos = ingredientsTable.fnGetPosition(this);
var aData = ingredientsTable.fnGetData(aPos);

document.getElementById('pcCode').value = aData[0];
document.getElementById('ingredientName').value = aData[1];
document.getElementById('ingredientManager').value= aData[3];

});

In the function called when an external "Add Thing" button is clicked:

var newRowArray = ingredientsTable.fnAddData( [
pcCode,
ingredientName,
ingredientManager,
ingredientTeamId,
'-1' ] );
var tableBodyQuery = "#ingredientsTable tbody";
var tableRowsQuery = tableBodyQuery + " tr";
$(tableRowsQuery).click(function(event) {
$(ingredientsTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(this).addClass('row_selected');

var aPos = ingredientsTable.fnGetPosition(this);
var aData = ingredientsTable.fnGetData(aPos);

document.getElementById('pcCode').value = aData[0];
document.getElementById('ingredientName').value = aData[1];
document.getElementById('ingredientManager').value= aData[3];

});