来自动态创建的 DIVS 的 JQuery UI 选项卡

Question

我正在创建一个信息仪表板来显示 Web 应用程序的各种操作的结果。

我想在表格中显示数据，按选项卡组织，即每个选项卡都是不同的类别和对应的表格。问题是这些选项卡和表格需要根据 ajax 响应动态创建。

现在我的 html 中的选项卡有这个骨架：

<div id="tabs">
  <ul></ul>
</div>

从我的 ajax 请求中，我以 JSON 格式获取所有类别和所有数据，并在 javascript 中：

function(data){
    //making the tab links and content divs
    $.each(data.cat, function(){
      $('#tabs ul').append('<li><a href="#'+this.id+'">'+this.name+'</a></li>');
      $('#tabs').append('<div id="'+this.id+'"></div>');
    }
    //making the tab content
    //cycle through all results, adding each to the table in div of its category
    $.each(data.results function(){
       var selector = '#' + this.catid + ' table tbody';
       $(selector).append('<tr><td>'+this.something+'</td><td>'+ 
            this.somethingelse + '</td></tr>');
    }
    $( "#tabs" ).tabs();
}

现在正在“工作”。它适当地将数据放入正在创建的正确 div 中，但是当我调用 tabs() 时的样式没有发生，所以我只有在彼此下方的 div。我知道问题所在——这些 div 对 DOM 来说是新的，而 jquery 没有看到它们，但我不知道如何解决它！

Answer 1

当你调用 .tabs() 时，jQuery 会看到修改后的 DOM，如果在调用 ajax 之前调用了 tabs，那么使用 .tabs('add'...) 是正确的方法使用（见下文）。附带说明一下，您的代码中有一些 Javascript 错误，但它确实有效：正如您发布的那样：http://jsfiddle.net/highwayoflife/AcV3H

要添加新标签，您应该使用.tabs('add' ...) 方法。

.tabs( "add" , url , label , [index] )

添加一个新标签。第二个参数要么是一个包含片段标识符的 URL，仅用于创建页内选项卡，要么是一个完整的 URL（相对或绝对，不支持跨域），以将新选项卡转换为 Ajax（远程）选项卡。第三个是插入新标签的从零开始的位置。可选，默认情况下在末尾附加一个新选项卡。

注意：使用 .tabs( "add", ... ) 动态创建的选项卡的 id 为 ui-tabs-NUM，其中 NUM 是自动递增的 id。

所以你的代码可能看起来像...

function(data) {
    $('#tabs').tabs();
    ...
    $.each(data.cat, function() {
        $('#tabs').tabs('add', this.id, this.name);
    });
}