Reconnect events after addrow

anthonyc0603

I am sure I am being stupid so I have made a donation in advance.

I have two tables. Each of them is enabled to allow multiple rows to be selected. On pressing a button, the selected rows are added to the other table and deleted from the original table. The intention is that rows can be swapped back and forth between the two tables. The problem is that the newly added rows are not selectable.

I presume that it has something to do with the event binding so I tried adding the click event again to the table into which the new rows are added. (I read the FAQ on post-initialisation events) No luck. Here is the code. I am relatively new to Javascript and Jquery so it could be something basic.

[code]
$(document).ready(function() {

$('#tblPlayers tr').click( function() {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});

var pTable = $('#tblPlayers').dataTable( );

$('#tblTeam tr').click( function() {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});

var tTable = $('#tblTeam').dataTable( );


$('#addToTeam').click(function() {
var aTrs = pTable.fnGetNodes();

for ( var i=0 ; i

allan

Hi anthonyc0603,

Thanks very much for the donation :-). It would be worth using the 'Support' option in future if you are looking for an answer to your question - it's the same process, but just allows me to track questions so I know which ones to prioritise.

In answer to your question, I'd suggest using live events rather than statically bound events, as this means you don't need to keep rebinding events. So something like

[code]
$( pTable.fnGetNodes() ).click(function() {
[/code]
would become:

[code]
$('#tblPlayers tr').live('click', function() {
[/code]
Also you might be interested in Visual Event, which allows you to see which nodes have events bound to them - useful for debugging this kind of thing: http://sprymedia.co.uk/article/Visual+Event

Regards,
Allan

anthonyc0603

Job done!

Thanks Allan. For completeness the working code is as follows;

[code]
$(document).ready(function() {

$('#tblTeam tr').live('click', function() {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});

var tTable = $('#tblTeam').dataTable( );

$('#tblPlayers tr').live('click', function() {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});

var pTable = $('#tblPlayers').dataTable( );

$('#addToTeam').click(function() {
var aTrs = pTable.fnGetNodes();

for ( var i=0 ; i