Firefox 3.5 上的 JQuery 和 tablesorter

Question

我正在使用 JQuery 1.6 和我能找到的最新的 tablesorter (sorttable)。我有一页做一个

$("div#child_container").load(child_url);

“child_url”引用的页面中有一个排序表。

在 FireFox 8 中，这完全符合您的期望。我有一个嵌入在 div 中的可排序表。

在 FireFox 3.5 中，它不起作用。列标题不可点击。它们是纯文本。斑马造型也没有发生，最初的排序也没有。运行 FireBug 显示它加载了 child_url（它加载了数据表，因此已确认）并加载了 sorttable.js 文件。没有错误。任何警告都与 CSS 相关。

我可以在 FireFox 3.5 上加载 child_url，它会完全按照您的预期工作，所以这本身似乎不是一个表格排序器问题。执行 JQuery .load() 以包含使用 tablesorter 的页面似乎是一个问题。

我愿意接受有关如何进行的建议。除了说“抱歉，您的浏览器太旧而且损坏了。”

编辑：我已经切换到 jquery.tablesorter.js。同样的问题。

编辑：我修改了我的child_url 页面，使其不提供文档类型、头部等。它只提供了<table> 和一个<script> 块，它会调用$("#tablediv").tablesorter( ... )。我将 .js 文件加载提升到父页面。在 3.5 和 8.0 上，这种行为同样不正常。我在 .tablesorter() 调用时遇到了一个 JavaScript 错误，这是我以前从未遇到过的。

Answer 1

首先，如果有什么方法可以归功于 Alfabravo，我会这样做。虽然他的评论并没有完全解决问题，但它让我走上了正轨。

我删除了child_url 页面，只提供了<table>。我将jquery.tablesorter.js 拉到父页面。我需要父页面在表上执行.tablesorter()。

$("div#pending").load(
    "pending.jsp", 
    function() {
        $("table#pending_records").tablesorter( {
            sortList: [[4, 0]],
            widgets: ["zebra"]
        } );
    } 
);

JQuery.load() 允许您指定要加载的 URL 以及在完全加载时执行的回调。这是克服我第二次编辑中提到的 Javascript 错误所需的秘诀。

另一方面：我实际上是使用jquery.ui.tabs.js 在两个不同的选项卡中加载两个排序表。第二个选项卡也没有表现。那是因为sorttable 在display: none 的块中不起作用。页面加载时：

• 第一个选项卡的内容是可见的，所以那里的内容呈现 正确
• 第二个标签的内容被隐藏了，所以它正在加载 内容，但 .sorttable() 没有执行，所以它没有正确渲染

我能够使用JQuery.load() doc 页面上提到的 hack 来解决这个问题。基本上，调整样式表，而不是：

.ui-tabs .ui-tabs-hide { display: none; }

它有：

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

由于包含内容的框架正在“显示”（尽管不在屏幕上），.sorttable() 会按您的预期工作。