jquery选项卡在单独的文件中排序

Question

根据这个页面：

http://jqueryui.com/demos/tabs/#ajax

我可以将选项卡的内容放在单独的文件中。这意味着我只需要以下 HTML：

<div id="tabs">
    <ul>
        <li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>
    </ul>
</tab>

其中 sortable-0.html 仅包含：

<div class="column" id="column_1">

    <div class="portlet" id="portlet_1">
        <div class="portlet-header">Home 1</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

</div>

<div class="column" id="column_2">

</div>

<div class="column" id="column_3">

</div>

但是当我这样做时，排序停止工作。如果我将可排序的 HTML 复制回原始文件，它会再次开始工作。

这是当前脚本，其中代码全部在 1 个文件中，因此下面的链接将起作用。但是，如果我将可排序的 HTML 移动到另一个文件中，然后将新文件的 URL 粘贴到 jquery ui tabs html 的以下部分，我将无法使其工作：

<li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>

当前工作示例的链接如下：

http://jsfiddle.net/oshirowanen/ZjXz6/

Answer 1

你必须了解 JS 是如何工作的...如果你调用 .sortable() 函数，它会在你的页面中搜索所有具有“portlet”类的元素并使它们可排序。

但是：使用 Ajax，您可以执行以下操作：加载页面，调用您的可排序函数，它将搜索类“portlet”的所有元素并使它们可排序，然后您通过 ajax 加载您的内容......您之前的可排序调用对您的新内容无效。这意味着，如果您通过 ajax 加载数据，则需要在成功加载内容后再次调用 .sortable() :)

看看你是否可以添加这样的东西：

$("#tabs").tabs({
    ajaxOptions: {
        success: function(){
            $(".column").sortable({
                connectWith: '.column'
            });
        }
    }
});