0

我正在使用 tablesorter 对表格中的结果进行分页。我还在其中一列上有一个工具提示，以显示它被批准的时间。表中的前 10 个结果（默认加载）将正确显示工具提示。如果我切换到下一页，悬停将显示默认浏览器标题工具提示，而不是由 JS 触发的提示。我相信这是因为 JS 的加载方式，而不是最初被分页隐藏的内容。这是我调用工具提示的方式：

$(document).ready(function () {
                     if ($("[rel=tooltip]").length) {
                     $("[rel=tooltip]").tooltip();
                     }
                   });

只是为了显示链接：

//This link displays my fancy tooltip correctly//
<a href="#" style="color:#000;" rel="tooltip" title="Monday January 28th 2013 12:11 PM">

//This link does not//
<a href="#" style="color:#000;" rel="tooltip" title="Monday January 28th 2013 01:25 PM">

就像我说的那样，两行之间的唯一区别是，一是在页面加载时加载，另一行是通过更改页面上可见的行数或转到下一页（顺便说一下是 JS，实际上并没有改变页面位置）。这些行是从 MySQL 生成的，而前十个工作，之后没有工作。我的结论正确吗？我会错过别的东西吗？感谢您的任何建议！

编辑：我要补充一点，导致我的困惑，分页器实际上并没有隐藏 html 源中的行。它只是不在浏览器窗口中显示它们。

4

2 回答 2

0

您的 tooltip() 似乎正在处理结果列表中的第一个条目。

$("[rel=tooltip]")

这总是返回一个列表，如果只找到一个，它只是“很好”任何功能都可以正常工作。

为了让它工作，试着循环每一个

$(function(){
    $("[rel=tooltip]").each(function(){
        $(this).tooltip();
    });
});
于 2013-02-05T14:50:35.083 回答
0

我的假设是，您正在通过 AJAX 加载页面。在这种情况下，您必须重新调用 AJAX 调用成功时的工具提示定义。您可以按如下方式执行此操作，

function initTooltip(){
if ($("[rel=tooltip]").length) {
                     $("[rel=tooltip]").tooltip();
                     }
}

$(document).ready(function () {
                     initTooltip();
                   });

$.ajax({
 /* some code */
 success: function(){
initTooltip();
}});

注意：这不是完整的代码。这将给出如何处理您的问题的想法。

于 2013-02-05T14:51:31.827 回答