JQuery Tab 函数未通过 JQuery 模板触发

Question

嗨，我正在使用 JQuery 选项卡 http://jqueryui.com/demos/tabs / 搜索结果从我的服务器返回，每一行可能有自己的选项卡，具体取决于搜索结果。如果用户单击排序选项，则搜索结果会发生变化，包括返回的每行中可能有或没有选项卡的选项卡。在上面的示例中，您可以看到返回了 2 条记录，并且顶部记录有名为“其他视频”的选项卡。

我已经成功地从服务器检索结果集，并且模板正确构建，但是我无法触发 .tabs() 函数？有谁有使用选项卡的经验并且知道如何启动我的 tabs() 函数？

下面是我在返回 json 结果集后用于动态加载模板的代码：

$(".searchBox").fadeOut("fast", function () {
    $(this).html("").fadeIn("fast", function () {
        $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");
    });
});

这是一个 for 循环，在加载模板并创建新的 html 选项卡后，我用它来迭代结果，以尝试获取要触发的 .tabs() 函数：

for(var i=0;i

{
    if (json.Data.SearchResults.Results[i].OtherVideos.length || json.Data.SearchResults.Results[i].VideoFriends.FriendCount > 0)
    {
        $(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();
        if ($(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").length > 0)
            alert("it exists");
        else
            alert("it dont");
    }
}

可以说警报框“它存在”成功显示，因此它正在查找模板生成的动态创建的 html 选项卡，但是选项卡本身并未由以下语句初始化：

$(document).find("div[ id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();

有谁知道我在这里缺少什么来获取 .tabs 的原因或内容() 函数来触发...

我已经检查了动态内容，并使用 firebug 检查器仔细检查了 html 代码，一切都按照 id 正确的方式进行，#id 在那里等等，所以我唯一的结论是 .tabs() 函数没有触发。这是 JQuery 选项卡本身的限制吗？它不能执行这种类型的“实时”加载功能吗？我应该使用回调函数作为加载模板本身的一部分吗？

以下是在选项卡不工作的情况下调用服务器后返回的内容的图片：

Answer 1

好吧，我解决了这个问题，我想我最好为那些遇到类似问题的人提供我的答案。

我应该将 for 循环放在与 tmpl 调用相同的回调函数内，例如：

$(".searchBox").fadeOut("fast", function () {
    $(this).html("").fadeIn("fast", function () {
        $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");

        // For loop should go here!

    });
});

我在这段代码之后有 for 循环，并且 tabs() 函数本质上根本没有引用新创建的选项卡。