使用动态Tab时Summernote无法正常工作

Question

我想使用summernote进行多种输入形式。这里发生的问题是，如果我手动添加summernote框，代码将正常工作，但是如果我通过jquery添加它以动态获取多个选项卡，则不会出现summernote输入框，结果仅是通常的textarea。有人可以帮我吗？

此结果来自“动态”标签

我添加此手册

$(".nav-tabs").on("click", "a", function (e) {
		e.preventDefault();
		if (!$(this).hasClass('add-pasal')) {
			$(this).tab('show');
		}
	})
	.on("click", "span", function () {
		var anchor = $(this).siblings('a');
		$(anchor.attr('href')).remove();
		$(this).parent().remove();
		$(".nav-tabs li").children('a').first().click();
	});

	$('.add-pasal').click(function (e) {
		e.preventDefault();
		var id = $(".nav-tabs").children().length; 
		var tabId = 'pasal_' + id;
		$(this).closest('li').before('<li><a href="#pasal_' + id + '">Pasal '+ id +' <span class="text-danger"><i class="fa fa-times"></i></span> </a></li>');
		$('.tab-content').append('<div class="tab-pane" id="' + tabId + '"><div class="panel-body"><textarea name="pasal" class="summernote"><h3>Lorem Ipsum is simply</h3></textarea></div></div>');
		$('.nav-tabs li:nth-child(' + id + ') a').click();
		console.log($('.tab-content'));
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

								<div class="tabs-container">

									<div class="tabs-left">
										<ul class="nav nav-tabs">
											<li><a class="nav-link active" data-toggle="tab" href="#pasal_1">Pasal 1 </a></li>
											<li><a href="#" class="add-pasal">+ Add Pasal</a></li>
										</ul>
										<div class="tab-content ">
											<div id="pasal_1" class="tab-pane active">
												<div class="panel-body">
													<textarea name="pasal" class="summernote">
														
														<h3>Lorem Ipsum is simply</h3>
														dummy text of the printing and typesetting industry. <strong>Lorem Ipsum has been the industry's</strong> standard dummy text ever since the 1500s,
														when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
														typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
														<br/>
														<br/>
														<ul>
															<li>Remaining essentially unchanged</li>
															<li>Make a type specimen book</li>
															<li>Unknown printer</li>
														</ul>
													</textarea>
												</div>
											</div>
										</div>
									</div>
								</div>

Answer 1

添加文本区域后，您将需要调用summernote函数。运行该函数时，它仅转换当时可用的对象，而不转换将来可用的对象。

$('.add-pasal').click(function (e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; 
        var tabId = 'pasal_' + id;
        $(this).closest('li').before('<li><a href="#pasal_' + id + '">Pasal '+ id +' <span class="text-danger"><i class="fa fa-times"></i></span> </a></li>');
        $('.tab-content').append('<div class="tab-pane" id="' + tabId + '"><div class="panel-body"><textarea name="pasal" class="summernote"><h3>Lorem Ipsum is simply</h3></textarea></div></div>');

       $("#" + tabId + " .summernote").summernote();

        $('.nav-tabs li:nth-child(' + id + ') a').click();
        console.log($('.tab-content'));
    });