javascript - 动态创建的 DIVS 中的 JQuery UI 选项卡

Question

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

我想在表格中显示数据，按选项卡组织，即每个选项卡都是与相应表格不同的类别。问题是这些选项卡和表格需要根据 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

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

要添加新选项卡，您应该使用 .tabs('add' ...) 方法。

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

Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.

NOTE: Tabs created dynamically using .tabs( "add", ... ) are given an id of ui-tabs-NUM, where NUM is an auto-incrementing id.

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

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