Question

我正在创建一个编辑器应用程序，它需要动态地将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);
}

创建第四个标签后

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>

Answer 1

查看以下生成的HTML是我在代码中发现的问题：

1）以下行生成li错误的ID，即tab4而不是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>');

修复后，您会看到代码正常运行

见工作fiddle

append（）到动态创建的选项卡

1 个答案: