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（选择）中有这样的东西：

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

在此之后，我在div命名内容中得到了正确的内容（div里面的id也很好 - ＆gt;在我的示例DOM中包含）：

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

但似乎javascript代码没有看到新创建的div，并且标签不适用于错误：“jQuery UI标签：不匹配的片段标识符”。

Haw我可以让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>

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

2 个答案: