jquery ui tabs在.tabs（）初始化后更改内容

Question

目的： 初始化后如何更改ui标签的内容。

请参阅下面的代码。$ tabs.find（content-1）等后可能出现的事情

1. 实际上我的标签包含基于json请求的内容 根据要求进行解析和显示（图表，表格等）。
2. 我无法使用
3. tab1方法描述 在ui docs中的ajax内容，因为我需要所有标签来获取数据 分开并同时加载。 Ajax方法不断替换一个 选项卡数据与其他标签数据不符合我的要求。

理想情况下，

1. 标签应该使用“loading ..”消息初始化。
2. 然后Afetr我已经检测到它的init事件，我应该说3个不同的ajaxcalls，处理数据和完成的任何一个，“loading ..”消息应该替换为它的内容。

My JSFIDDLE

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a>
        </li>
        <li><a href="#tabs-2">tab2</a>
        </li>
        <li><a href="#tabs-3">tab3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>loading...</p>
    </div>
    <div id="tabs-2">
        <p>loading...</p>
    </div>
    <div id="tabs-3">
        <p>loading...</p>
    </div>
</div>

JS

$tabs = $('#tabs').tabs({
    cache: false,
});
//
$tabs.do something here
$tab. detect evet if tabs have initialized ..
then send ajax requests and append to tabs content area ..

Answer 1

工作DEMO

试试这个

我想这就是你需要的东西

$(document).ready(function () {

    $tabs = $('#tabs').tabs({
        cache: false,
    });
    if ($('#tabs').hasClass('ui-tabs')) { // check if tabs initilized
        $('.tab').each(function () {
            var tab = $(this);
            $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    tab.html("success"); // for demo
                }

            });

        });
    }
});