2

我正在创建一个需要将 HTML 动态附加到文档中的编辑器应用程序。我正在使用 JQuery UI 选项卡将文档划分为多个部分。我希望能够动态添加选项卡，然后使用 append() 将内容添加到选项卡中。

该页面在加载时有 3 个选项卡，我希望能够在需要时动态添加更多选项卡。

目前，我的代码在将内容附加到 3 个非动态选项卡以及创建新选项卡时有效。出于某种原因，我无法将任何内容附加到新的、动态创建的选项卡中。

为什么我的代码无法将内容添加到动态创建的选项卡？

$(function () {
    $('#addTab').click(function () {
        var num_tabs = $('div#tabs ul li.tab').length + 1;
        $('div#tabs ul').append(
            '<li class="tab"><a href="#tab' + num_tabs + '">Section ' + num_tabs + '</a></li>');
        $('div#tabs').append(
            '<div id="tab-' + num_tabs + '></div>');
        $('#tabs').tabs("refresh");
        $('#tabs').tabs("option", "active", -1); //makes the new tab active
    });
});

//Insert content into the currently selected tab
function insertContent(content) {
    var activeTab = $("#tabs").tabs('option', 'active');
    activeTab += 1;
    console.log(activeTab);
    $("#tab-" + activeTab).append(content);
}

创建第 4 个选项卡后的 HTML：

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
 <li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="false"><a href="#tab-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Section 1</a></li>
 <li class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tab-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Section 2</a></li>
 <li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tab-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Section 3</a></li>
 <li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab4" aria-labelledby="ui-id-7" aria-selected="true"><a href="#tab4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-7">Section 4</a></li></ul>

 <div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><br><p contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_83" style="position: relative;">Paragraph text</p></div>

<div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display:none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_153" style="position: relative;">Paragraph text</p></div>

<div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor3" title="Rich Text Editor, editor3" aria-describedby="cke_223" style="position: relative;">Paragraph text</p></div>
</div>
4

1 回答 1

2

查看生成的 HTML 后，我发现您的代码存在以下问题：

li1)使用错误的 Id生成的以下行ietab4而不是tab-4

$('div#tabs ul').append(
            '<li class="tab"><a href="#tab' + num_tabs + '">Section ' + num_tabs + '</a></li>');

更改<a href="#tab'为<a href="#tab-'

2) id 中缺少以下行"，因此选项卡中未附加 div

$('div#tabs').append(
            '<div id="tab-' + num_tabs + '"></div>');

一旦你在那里修复，你会看到你的代码正常工作

见工作小提琴

于 2013-09-02T11:57:35.963 回答