javascript - 添加时重复输入

Question

该脚本的想法是向其中添加部分和文本框。如果我添加一个部分并向其中添加输入，则所有内容都会播放。然而，当我添加另一个时 - 其中一个提示是重复的，我不明白为什么，我输入代码来检查我的意思。

$("#add_section").on("click", function() {
			
			var sectionid = $(".sekcja").length;
			$("#sectionid").val(sectionid);
			var sectionwidth = prompt("Section width");
			$("#sectionwidth").val(sectionwidth);
			var sectionheight = prompt("Section height");
			$("#sectionheight").val(sectionheight);
			var bg = prompt("Section background color");
			$("#bg").val(bg);
			var sectioncolor = prompt("Section font color");
			$("#sectioncolor").val(sectioncolor);
			$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button></div>');
			$(".add_text").on("click", function() {
				
				var inputid = $('.sample').length;
				$("#inputid").val(inputid);
				var inputwidth = prompt("Width text area");
				$("#inputwidth").val(inputwidth);
				$(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>');
				
			});

			if ($(".section").length > 0) {
				$("#default-section").css("display","none");	
			}

			if(sectionwidth < 1050) {
				$(".section").css("float","left");	
			}

		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
<div id="default-section">Default</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

Answer 1

一种方法是您可以添加一个id，例如@Pete答案

如果您不想添加id，则将$(".add_text").on("click")移到外部并与绑定(bind)#new_section。参见下面的代码:

将 $(".add_text").on("click", function() ); 移至外部并

$("#add_section").on("click", function() {
			
			var sectionid = $(".sekcja").length;
			$("#sectionid").val(sectionid);
			var sectionwidth = prompt("Section width");
			$("#sectionwidth").val(sectionwidth);
			var sectionheight = prompt("Section height");
			$("#sectionheight").val(sectionheight);
			var bg = prompt("Section background color");
			$("#bg").val(bg);
			var sectioncolor = prompt("Section font color");
			$("#sectioncolor").val(sectioncolor);
			$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button></div>');
			

			if ($(".section").length > 0) {
				$("#default-section").css("display","none");	
			}

			if(sectionwidth < 1050) {
				$(".section").css("float","left");	
			}

});

$("#new_section").on("click", ".add_text", function() {
				
	var inputid = $('.sample').length;
	$("#inputid").val(inputid);
	var inputwidth = prompt("Width text area");
	$("#inputwidth").val(inputwidth);
	$(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>');
				
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
<div id="default-section">Default</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>