0

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

我正在使用 AJAX、PHP 和数据表。连接工作正常。我可以在我的数据表中显示记录。

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

据我设法发现，发生在我身上的是事件没有检测到行。也就是我使用的代码如下...

    $("#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>

如果我手动向页面添加一行，则鼠标悬停示例：

       <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 插入的行。

从已经非常感谢了。我希望我很清楚。我等待你的意见。

再次感谢你。问候。

4

1 回答 1

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在本例中）以及目标元素是否满足过滤条件（在本例中）确定元素必须是trunder #tabla tbody)，然后处理程序将在该目标元素上运行。

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

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

于 2013-09-18T00:24:36.000 回答