来自动态创建的DIVS的JQuery UI表
我正在创建一个信息仪表板来显示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中，但是调用tab()时的样式没有发生，所以只有div在彼此下面。我知道问题所在--这些div是DOM中的新手，jquery没有看到它们，但是我不知道如何修复它！
回答 1
Stack Overflow用户
发布于 2011-11-03 20:49:35
jQuery将在调用.tabs()时看到修改后的DOM，如果在调用ajax之前调用选项卡，则使用.tabs(‘add’.)是要使用的正确方法(见下文)。另外，您的代码中有一些Javascript错误，但是它确实有效:正如您发布的：http://jsfiddle.net/highwayoflife/AcV3H
对于添加新选项卡，您应该使用.tabs('add' ...)方法。
.tabs(“添加”、url、标签、索引)
添加一个新选项卡。第二个参数是一个URL，该url由片段标识符组成，仅用于创建页面中的选项卡，或者是一个完整的url(相对的或绝对的，没有跨域支持)，以将新选项卡转换为Ajax (远程)选项卡。第三个位置是从零开始插入新选项卡的位置.可选，默认情况下，在末尾追加一个新选项卡。
注意:使用.tabs动态创建的选项卡( "add"，.)给出一个ui选项卡- NUM的id，其中NUM是一个自动递增的id。
所以你的代码可能看起来像..。
function(data) {
$('#tabs').tabs();
...
$.each(data.cat, function() {
$('#tabs').tabs('add', this.id, this.name);
});
}https://stackoverflow.com/questions/8001502
复制相似问题
腾讯云开发者
