jquery - 为什么在jquery中添加新标签时没有内容？

Question

首先，我使用以下代码创建了一个选项卡：

<div id="statsTabs" style="width:100%; height:100%">
    <ul>
        <li><a href="#f-campaign"><span>广告系列</span></a></li>
        <li><a href="#f-adgroup"><span>广告组&lt;/span></a></li>
   </ul>
</div>
<div id="f-campaign">...</div>
<div id="f-adgroup">...</div>
<script>
   $(document).ready(function() {
     $("#statsTabs").tabs();
   });
</script>

一切都很好，但是当我尝试下面的代码时，我遇到了一些问题：

$("#statsTabs").tabs( "remove" , 0);
$("#statsTabs").tabs("add", '#f-campaign', "广告系列" , 0);

出现一个带有“广告系列”标签的新标签，但里面没有内容，为什么？由于第一个代码段获取了#f-campaign 的内容。

Answer 1

当您调用 Remove 函数时，它会删除选项卡和内容。

这就是您无法再次添加它的原因。您需要重新构建它才能执行此操作。

我做了一个 JS fiddleconsole.log()来证明这一点：http: //jsfiddle.net/Allan/2YcBh/

您可以通过使用如下回调函数来避免这种情况：

$(document).ready(function() {
    $("#statsTabs").tabs({
       remove: function(event, ui) {
        // Back up the content here, or simply move the tab so that you can add it again later.
       }
    });
    $('input').click(function() {
        $("#statsTabs").tabs( "remove" , 0);
        console.log($('#f-campaign'));
        $("#statsTabs").tabs("add", '#f-campaign', "广告系列" , 0);
    });
});​

Answer 2

this：也$("#statsTabs").tabs( "remove" , 0); 删除 theli和关联div的，因此当您再次添加选项卡时，它没有内容，正如预期的那样。