ドキュメントに 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>