Question

我正在使用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源代码中的行。它只是不在浏览器窗口中显示它们。

Answer 1

您的tooltip（）似乎正在处理结果列表中的FIRST条目。

$("[rel=tooltip]")

这总是返回一个列表，如果只找到一个，那么任何函数都能正常工作的“好”。

使它工作，尝试遍历每一个

$(function(){
    $("[rel=tooltip]").each(function(){
        $(this).tooltip();
    });
});

Answer 2

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

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

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

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

注意：这不是整个代码。这将为您提供如何处理问题的想法。

JavaScript未加载分页结果

2 个答案: