Jquery ui JQuery ui选项卡-重新加载包含全新内容的页面不起作用

我正在加载一个报告，并用jquery ui以选项卡格式显示它。报告由json中的ajax调用返回，函数将其格式化为HTML。示例代码如下：

<div id="reportdiv">
</div>

<script>
function displayreport(objectid)
{
    $( "#reportdiv" ).hide();
    $( "#reportdiv" ).html("");
    $.ajax({
        type: "GET",
        headers: { 'authtoken': getToken() },
        url:'/reportservice/v1/report/'+objectid.id,
        success: function(data){
            if(data == null)
            {
                alert("That report does not exist.");
            }
            else
            {
                var retHTML = dataToTabHTML(data.config);
                $("#reportdiv").html(retHTML).fadeIn(500);
                $(function() {
                    tabs = $( "#reportdiv" ).tabs();
                    tabs.find( ".ui-tabs-nav" ).sortable({
                      axis: "x",
                      stop: function() {
                        tabs.tabs( "refresh" );
                      }
                    });
                });
            }
        }
    });
}
</script>

函数displayreport（objectid）
{
$（“#reportdiv”）.hide（）；
$（“#reportdiv”）.html（“”）；
$.ajax({
键入：“获取”，
标题：{'authtoken'：getToken（）}，
url:'/reportservice/v1/report/'+objectid.id，
成功：功能（数据）{
如果（数据==null）
{
警报（“该报告不存在”）；
}
其他的
{
var retHTML=dataToTabHTML（data.config）；
$（“#reportdiv”）.html（retHTML）.fadeIn（500）；
$（函数（）{
tabs=$（“#reportdiv”）.tabs（）；
tabs.find（“.ui tabs nav”）.可排序({
轴：“x”，
停止：函数（）{
制表符。制表符（“刷新”）；
}
});
});
}
}
});
}

这在第一次调用displayreport时工作正常。但是，如果用户输入另一个值并再次运行displayreport，“选项卡”格式将完全丢失（选项卡显示为“我的部分”上方的链接，单击链接将带您进入页面下方的该部分）

---

我认为在函数开始时完全重新设置reportdiv html会使我回到原始状态，并允许它每次正常工作。有什么建议吗？

经过更多的测试，我们发现销毁是一条可行之路。如果我已经设置了选项卡，请运行destroy，否则，跳过destroy（）：

---

查看这个jsfiddle进行演示。第一次单击“重新加载”按钮时，它会工作。第二次点击它，它有我描述的问题。思想？[连结]

if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");