Click event not detected
Click event not detected
I am trying to select the row with the next code:
$(document).ready(function() {
/*** THIS IS THE CODE FRAGMENT WITH THE PROBLEM ***/
$('#example tr').click( function(e) {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
} );
/*** THIS IS THE CODE FRAGMENT WITH THE PROBLEM ***/
dTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bLengthChange": true,
"iDisplayLength": 5,
"bProcessing": true,
"aoColumns": [
/*idlot*/ null,
/*description*/ null,
/*creation date*/ null,
/*reference*/ null
],
/*"sAjaxSource": 'getLotsActivationPagination.do',*/
"sAjaxSource": 'scripts/aData.json',
"oLanguage": {
"sProcessing": "Procesando ...",
"sLengthMenu": "Mostrar 5102550100 registros por página",
"sZeroRecords": "No se encontraron resultados",
"sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ registros",
"sInfoEmtpy": "Mostrando de 0 a 0 de 0 registros",
"sInfoFiltered": "(filtrado _MAX_ del total de registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sPrevious": "Anterior",
"sNext": "Siguiente",
"sLast": "Último"
}
}
});
//$("#example tr *:nth-child(1)").css("display","none");
//dTable.fnSetColumnVis(0, false);
});
What could be wrong that the row is not being selected? My styles are correct and I think the problem is the event is not detected because if I execute this code snippet, it runs correct:
for ( var i=0 ; i
$(document).ready(function() {
/*** THIS IS THE CODE FRAGMENT WITH THE PROBLEM ***/
$('#example tr').click( function(e) {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
} );
/*** THIS IS THE CODE FRAGMENT WITH THE PROBLEM ***/
dTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bLengthChange": true,
"iDisplayLength": 5,
"bProcessing": true,
"aoColumns": [
/*idlot*/ null,
/*description*/ null,
/*creation date*/ null,
/*reference*/ null
],
/*"sAjaxSource": 'getLotsActivationPagination.do',*/
"sAjaxSource": 'scripts/aData.json',
"oLanguage": {
"sProcessing": "Procesando ...",
"sLengthMenu": "Mostrar 5102550100 registros por página",
"sZeroRecords": "No se encontraron resultados",
"sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ registros",
"sInfoEmtpy": "Mostrando de 0 a 0 de 0 registros",
"sInfoFiltered": "(filtrado _MAX_ del total de registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sPrevious": "Anterior",
"sNext": "Siguiente",
"sLast": "Último"
}
}
});
//$("#example tr *:nth-child(1)").css("display","none");
//dTable.fnSetColumnVis(0, false);
});
What could be wrong that the row is not being selected? My styles are correct and I think the problem is the event is not detected because if I execute this code snippet, it runs correct:
for ( var i=0 ; i
This discussion has been closed.
Replies
"sAjaxSource": 'scripts/aData.json',
If the body is set plain in the html it works fine with no problem.
Is it a bug?
(http://docs.jquery.com/Events/live#typefn)
if its useful for someone.
No this is not a bug - the issue is that your event handler is only being applied once - the the first set of data rows, which are then being destroyed (along with the attached event handler). You can overcome this with live() or reapplying the event handler using fnDrawCallback().
You might be interested in using my Visual Event bookmarklet which shows which elements have events applied to them: http://sprymedia.co.uk/article/Visual+Event
Regards,
Allan