javascript - 使用动态 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'));
    });