JQuery UI选项卡不带'；当我通过Ajax加载内容时，无法正确渲染

我有以下JQuery选项卡的html内容：

<div id=tabs >
    <ul>
        <li><a href=#tab1>Tab 1</a></li>
        <li><a href=#tab2>Tab 2</a></li>
    </ul>
    <div id=tab1>Content of Tab1</div>
    <div id=tab2>Content of Tab2</div>
</div>

只要我将内容直接放在我的初始jsp页面（不是ajax）中，一切都很好。但如果我通过ajax调用将内容加载到页面中：

$( "#tabs" ).load(
        'fetchTabs', null, checkerTabs_jqueryui_init
    );

它不会将内容呈现为选项卡，就像列表一样，没有应用tabs（）函数。ajax调用返回完全相同的html内容，并且回调函数肯定会被调用，但我不明白为什么它不能正确呈现。

---

我错过了什么吗？

我终于自己找到了答案。 问题的根本原因是多次调用

上的tabs（）。第一次，每件事都很顺利。但是当我再次加载div的内容并再次调用div上的tabs（）函数时，它就不起作用了。我仍然想知道为什么JQuery对此如此感情用事，但我通过以下方式解决了这个问题：

每次将

与内容一起加载。我的意思是通过我的ajax load（）函数将整个div加载到

标记中，该函数实际上重置了应用于div的css类的状态

所以jquery每次都像第一次一样工作。

---

如果在调用tabs（）之前删除应用于

的所有类，可能也可以正常工作。

将其放入JSFIDLE，以便人们可以使用它。这样你会得到更好的帮助。我发现问题不在于ajax，当我第一次调用tabs（）函数时，它工作正常，然后当我更改div的内容并再次调用tabs（）时，这次它无法正确渲染！我还不知道为什么，无论如何我不会放弃……我有一个相关的问题（标签没有正确重新加载）。我遵循了在SO上找到的建议，对tabs元素再次执行了destroy和init，从而解决了问题。可能想尝试一下，而不是完全重新加载。

$( "#tabs" ).load(
        'fetchTabs', null, checkerTabs_jqueryui_init
    );