Question

我在互联网上搜索了很多，但没有找到问题的解决方案。

我正在使用AJAX，PHP和Datatables。采样工作正常。我可以在我的数据表中显示记录。

我想这样做是行不通的，当鼠标悬停在每一行上时，它会“点亮”并将鼠标移回正常状态。

据我设法发现，发生的事情是该事件未检测到行。也就是说，我使用的代码如下......

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

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

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

Html代码：

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

如果我手动添加一行页面，那么IT工作鼠标悬停例如：

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

问题是当通过AJAX函数插入行时我不工作。

AJAX代码：

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

注意：我用.live（）,. on（）,. click（）绑定并且不起作用。

同样，我认为问题是它没有检测到ajax插入的行。

非常感谢你。我希望我很清楚。我等待你的评论。

再次感谢你。问候。

Answer 1

问题在于，最初运行jQuery时，元素不存在。现在你说你之前使用过on()，但是你没有包含那些代码。我只是假设您错误地实现了它（即可能没有使用委托事件方法）。看起来应该是这样的：

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

on()允许您将事件处理程序绑定到DOM中尚不存在的元素。在这种情况下，您将事件处理程序附加到#tabla tbody（必须在初始文档加载时存在）。因此，当#tabla tbody的后代元素发生任何事件时，它们会冒泡到与on()关联的#tabla tbody事件处理程序，然后可以根据事件类型（mouseenter/mouseleave确定在这种情况下），并根据目标元素是否满足过滤条件（在这种情况下，元素必须是tr下面的#tabla tbody），然后处理程序将在该目标元素上运行。 / p>

以下是文档：http://api.jquery.com/on/

请注意，我指定了mouseenter / mouseleave而不是mouseover / mouseout。这是因为这可能是您实际想要的行为，而不是在子元素（即td）也悬停时触发这些事件，这就是鼠标悬停/鼠标移除会发生的情况。

突出显示数据表jquery

1 个答案: