Jquery ui 在单独文件中具有排序表的jquery选项卡

根据本页：

我可以将选项卡的内容放在单独的文件中。这意味着我只需要有以下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>

家1
Lorem ipsum dolor sit amet，一位杰出的领导者

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

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

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

与currect工作示例的链接如下：

---

您必须了解JS的工作原理。。。如果调用.sortable（）函数，它将使用类“portlet”搜索页面中的所有元素，并使em可排序

但是：使用Ajax您可以这样做：加载页面，您的可排序函数被调用，它将搜索类“portlet”的所有元素并使em可排序，然后您通过Ajax加载您的内容。。。您以前对sortable的调用对新内容无效。这意味着，如果通过ajax加载数据，则需要在成功加载内容后再次调用.sortable（）

看看是否可以添加如下内容：

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

---

您需要用另一个div来包装

.column

。。。因此包装器是可排序的，

.column

是它要排序的项目，以替换$（“#tabs”）.tabs（）；使用我发布的代码：）可以工作，但似乎每次单击选项卡时都会重新加载选项卡内容。默认行为只是在每个会话中加载一次选项卡，可以多次单击该选项卡，而无需再次往返服务器。不过，添加了cache:true选项，它正按照我希望的方式工作！谢谢