我在互联网上搜索了很多,但没有找到解决问题的方法。
我正在使用AJAX,PHP和数据表。普雷工作正常。我可以在我的数据表中显示记录。
我想这样做不起作用的是,当鼠标悬停在每一行上时,它会"亮起"并将鼠标移回正常状态。
据我设法发现,发生在我身上的是该事件没有检测到行。也就是说,我使用的代码如下...
$("#tabla tbody tr").each(function(){
$(this).mouseover(function(){
$(this).addClass("ui-state-hover");
}).mouseout(function(){
$(this).removeClass("ui-state-hover");
});
});
网页代码:
<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 插入的行。
从已经非常感谢你了。我希望我说得很清楚。我等待你的评论。
再次感谢。问候。
问题恰恰在于,当你的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
的后代元素的任何事件发生时,它们会冒泡到绑定到#tabla tbody
的on()
事件处理程序,然后可以根据事件类型(在本例中为mouseenter/mouseleave
)以及目标元素是否满足过滤条件(在这种情况下,元素必须是#tabla tbody
下的tr
)来确定 然后处理程序将在该目标元素上运行。
以下是文档:http://api.jquery.com/on/
请注意,我指定了mouseenter/mouseleave而不是mouseover/mouseout。这是因为这可能是您实际想要的行为,而不是在子元素(即 td
)也悬停,这就是鼠标悬停/鼠标退出时会发生的情况。