jquery - 处理 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" );