处理在 jquery ui 选项卡中以编程方式添加的 div

Question

我在使用 jquery ui 选项卡处理动态添加的 div 时遇到问题。我的目标是只有一个 div 元素，其中根据用户选择的选项卡填充该元素的内容。现在我知道在处理选项卡时，这个库需要能够使用列表中的 href 指向的 id 访问 div。所以，添加 div 我使用了 select 方法，像这样：

$("#tabs").tabs({
    select: function (event, ui) {
        var choice = ui.tab.href;
        choice = choice.split("/");
        showContent(choice[choice.length - 1]); //choice -> geting a href value of selected   tab (for example: #tab-1)  
    }
});

在 showContent(choice) 中是这样的：

function showContent(choice) {
    div_id = choice.replace("#", "");
    //set content div like
    $("#content").html("<div id='" + div_id + "'>" + some_content + "</div>");
}

在此之后，我在名为 content 的 div 中获得了正确的内容（内部 div 的 id 也很好 -> 在我的示例 DOM 中包含）：

<div id="content"><div id="tab-1">content</div></div>

但似乎 javascript 代码看不到新创建的 div，并且选项卡无法使用错误：“jQuery UI 选项卡：不匹配的片段标识符”。

我可以让 javascript 看到这个新的 div 元素吗？

Answer 1

我想你忘了添加这个：

<li><a href="#tabs-1"> Tab 1</a></li>

刷新标签容器后

$( ".#tabs" ).tabs( "refresh" );

Answer 2

我认为您正在寻找的是一个 AJAX implementation 的 JQuery-UI 选项卡。

这使您可以不在要存储内容的页面上存储所有选项卡内容。

来自 JQueryUI 站点的示例：
JavaScript：

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });
    }
});

HTML：

   <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Preloaded</a></li>
            <li><a href="ajax/content1.html">Tab 1</a></li>
            <li><a href="ajax/content2.html">Tab 2</a></li>
            <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
            <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
    </div>