突出显示数据表jQuery

Question

I searched a lot on the internet and have not found the solution to my problem.

Im working with AJAX, PHP and Datatables. The pluing works fine. I could display the records in my Datatable.

I want to do that does not work is that when mouse over each row, it "lights" and removing the mouse back to normal.

As far as I managed to find out, what is happening to me is that the event does not detect row. That is, the code I use is as follows ...

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

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

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

Html code:

         <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>

If I add to the page manually a row, IT WORKS the mouseover Example:

       <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>

THE PROBLEM is that I DO NOT WORK when the rows are inserted through AJAX function.

AJAX Code:

$.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

Note: I tied with .live(), .on(), .click() and doesn't work.

Again, I think the problem is that it doesn't detect rows inserted by ajax.

From already thank you very much. I hope I was clear. I await your comments.

Thank you again. Regards.

Answer 1

The problem is exactly that the elements don't exist when your jQuery is initially run. Now you said you had used on() previously, but you did not include that code. I am just assuming you implemented it incorrectly (i.e. perhaps didn't use delegated events approach). It should look something like this:

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

on() allows you to bind event handlers to elements that do not yet exist in the DOM. In this case you are attaching an event handler to #tabla tbody (which must exist on initial document load). So as any events from descendant elements of #tabla tbody occur, they bubble up to the on() event handler tied to #tabla tbody, which then can determine based on the event type (mouseenter/mouseleave in this case), and based on whether the target element meets the filtering criteria (in this case the element must be a tr underneath #tabla tbody), then the handler will be run on that target element.

Here is documentation: http://api.jquery.com/on/

Note that I specified mouseenter/mouseleave instead of mouseover/mouseout. This is because this is probably the behavior you actually want rather than having these events fired when child elements (i.e. td's) are also hovered, which is what would happen for mouseover/mouseout.