[SOLUCIONADO] Problema con Datatables - Seleccionar fila

[larenga_lomas]

Antes que nada buen día a todos.
He buscado mucho por internet y no he encontrado la solución a mi problema.
Paso a comentar.
Estoy trabajando con AJAX, PHP y Datatables.
Me funciona bien el pluing. Y he logrado mostrar los registros en mi Datatable.

Lo que quiero hacer que no me funciona es que al pasar el mouse por arriba de cada fila, se "ilumine" y al quitar el mouse vuelva a su estado normal.

Hasta donde he logrado averiguar, lo que me está pasando es que el evento, no me detecta la fila <TR>. Es decir, el código que uso es el siguiente...

$("#tabla tbody tr").each(function(){

$(this).mouseover(function(){
$(this).addClass("ui-state-hover");

}).mouseout(function(){
$(this).removeClass("ui-state-hover");
});
});

El código de la tabla es el siguiente:

<table id="tabla">
<thead>
<tr>
<th>Id</th>
<th>Titulo</th>
<th>Subtitulo</th>
<th>Fecha</th>
<th>Acceder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Si le agrego a la página manualmente una fila, SI ME FUNCIONA EL mouseover
Ejemplo:
<table id="tabla">
<thead>
<tr>
<th>Id</th>
<th>Titulo</th>
<th>Subtitulo</th>
<th>Fecha</th>
<th>Acceder</th>
</tr>
</thead>
<tbody>
<tr >
<td>4</td>
<td>Titulo</td>
<td>Subtitulo</td>
<td>2013-09-11 00:00:00</td>
<td>4</td>
</tr>
</tbody>
</table>

EL PROBLEMA es que NO ME FUNCIONA cuando las filas son insertadas a través de la función AJAX.

Dejo el código por si lo quieren ver.

$.ajax({
url:'./listahistorias_proceso.php',
type:'post',
data:{ tag: 'getData'},
dataType: 'json',
success: function(data){
if(data.success){
$.each(data, function(index,record){
if($.isNumeric(index)){
var row = $("<tr />");
$("<td />").text(record.idhistoria).appendTo(row);
$("<td />").text(record.titulo).appendTo(row);
$("<td />").text(record.subtitulo).appendTo(row);
$("<td />").text(record.fecha).appendTo(row);
$("<td />").text(record.acceder).appendTo(row);
$("<tr>");
row.appendTo('table tbody');
}
})
}

oTable = $('table').dataTable({
"bjQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ filas por pagina",
"sZeroRecords": "Datos no encontrados",
"sInfo": "Mostrando _START_ a _END_ de _TOTAL_ filas",
"sInfoEmpty": "Sin entradas para mostrar",
"sInfoFiltered": "",
"sSearch": "Buscar",
"sProcessing": "Buscando...",
"sLoadingRecords": "Por favor espere - Cargando...",
"sEmptyTable": "No se obtuvieron datos",
"oPaginate": {
"sFirst": "Primera",
"sPrevious": "Anterior",
"sNext": "Siguiente",
"sLast": "Ultima"
}

},
"aoColumns":[
{'sname':'id', 'sType':'numeric', 'bVisible':true},
{'sName':'Titulo', 'sType':'string','bVisible':true},
{'sName':'Subtitulo', 'sType':'string','bVisible':true},
{'sName':'Fecha', 'sType':'date','bVisible':true},
{'sName':'Acceder', 'sType':'numeric','bVisible':true}
],
"oTableTools": {
"sRowSelect": "single",
"fnRowSelected": function( node ) {
alert("Clicked");
}
}
})


},
error: function(jqXHR, textStatus, errorThrown){
alert("error ==>" + jqXHR.responseText);
alert("error ==>" + jqXHR.textStatus);
alert("excepcion ==>" + errorThrown);

}

}); //ajax


Nota:
He probado con otros eventos como .live(), .on(), .click() y no me funcionan.

Repito creo que el problema esta en que no me detecta las filas que se insertan por ajax.

Desde ya muchas gracias. Espero haber sido claro y no complicado.
Aguardo sus comentarios.

Gracias de nuevo.
Saludos.

[larenga_lomas]

Fue solucionado de la siguiente forma:

$('#tabla tbody').on('mouseenter', 'tr', function() {
$(this).addClass("ui-state-hover");
});

$('#tabla tbody').on('mouseleave', 'tr', function() {
$(this).removeClass("ui-state-hover");
});

Si no entendí mal, el evento on() trabaja de forma dinámica con objetos que aún no han sido creados.

Por eso no me tomaba "#tabla > tbody > tr". Porque "tr" se crea de forma dinámica cuando se agrega por ajax. No es un objeto que está desde el inicio de la página. Entonces no lo encontraba.

Saludos.

[chelitovc]

Revisando este blog pude confirmar que si '.on()', es la solucion
ej:

Código:

$('#tablaRegistro').on('keyup','#tr td #num',function(){})

'keyup'= evento a realizarse
'#tr td #num'=fila insertada dinamicamente.
function(){}=funcion a aplicarse.

Lei por ahi que el metodo live() ya esta obsoleta...

Gracias me salvaron nuevamente...

[santiagoaburto]

una pregunta yo tengo el mismo problema pero con el id de la tabla como es creado por ajax no la puedo convertir en un data table como puedo lograr llamar a ese id para que se convierta en un datable.les explico un poco mi codigo.
Primero cargo un buscador y por metodo pos hago que carguen los datos desde otro php.
$(document).ready(function() {
$('#load').on('click',function(){
var button = $(this).attr('id');
var randomnumber=Math.random()*11;
$.post("funciones/Buscar_Expedientes.php", {
randomnumber:randomnumber,
nombre:"nombre"
}, function(data){
$("#contenido").html(data);
//$(document).on("click","#importar_datos",function( ){
//en esta parte es donde me parece que no encuentra el #contenido por que este es creado por el ajax
$('#contenido').dataTable( { //CONVERTIMOS NUESTRO LISTADO DE LA FORMA DEL JQUERY.DATATABLES- PASAMOS EL ID DE LA TABLA
"sPaginationType": "full_numbers" //DAMOS FORMATO A LA PAGINACION(NUMEROS)
} );
});
});
});

mi codigo en la carga de datos
<?php
ini_set('max_execution_time', 300);
ini_set ('memory_limit', '512M');
$nombre=$_POST['nombre'];
$cif=$_POST['cif'];
$telefono=$_POST['telefono'];
$origen=$_POST['origen'];
$llamados=$_POST['llamados'];
include '../conexion/conexion.php';


$sql="exec sp_buscar '".$nombre."','".$cif."','".$telefono."','".$orige n."','".$llamados."'";
$rs = mssql_query($sql,$link);
echo $sql."<br>";
?>


<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabla_lista_paises">
<thead>
<tr>
<th>id</th><!--Estado-->
<th>Pais</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<?php
while($reg= mssql_fetch_array($rs))
{
echo '<tr>';
echo '<td >'.mb_convert_encoding($reg[0], "UTF-8").'</td>';
echo '<td>'.mb_convert_encoding($reg[1], "UTF-8").'</td>';
echo '</tr>';

}
?>
<tbody>
</table>


si me oueden ayudar